@conduction/nextcloud-vue 2.139.0 → 2.141.0

package/l10n/en.json

@@ -2380,7 +2380,9 @@
     "You save the order along with a view.": "You save the order along with a view.",
     "me": "me",
     "Open profile": "Open profile",
-    "Link a contact from your address book.": "Link a contact from your address book."
+    "Link a contact from your address book.": "Link a contact from your address book.",
+    "The value could not be shown.": "The value could not be shown.",
+    "No value": "No value"
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2630,7 +2630,12 @@
     "You save the order along with a view.": "De sortering bewaart u mee in een weergave.",
     "me": "ik",
     "Open profile": "Profiel openen",
-    "Link a contact from your address book.": "Koppel een contact uit je adresboek."
+    "Link a contact from your address book.": "Koppel een contact uit je adresboek.",
+    "The value could not be shown.": "De waarde kon niet worden getoond.",
+    "Save as draft": "Opslaan als concept",
+    "Draft saved at {time}": "Concept opgeslagen om {time}",
+    "The draft could not be saved": "Het concept kon niet worden opgeslagen",
+    "No value": "Geen waarde"
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.139.0",
+  "version": "2.141.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -770,9 +770,10 @@ import { DEFAULT_FORGE, resolveForge } from '../../utils/forge.js'
 import { BUILT_IN_KB_PROVIDERS } from '../../utils/kbSearchProviders.js'
 import { createManifestTranslate } from '../../utils/manifestTranslate.js'
 import { installModalStack, uninstallModalStack } from '../../utils/modalStack.js'
+import { loadMyTeam } from '../../utils/myTeam.js'
 import { OBJECTS_CHANGED_EVENT } from '../../utils/objectSignals.js'
 import { resolveBrand } from '../../utils/resolveBrand.js'
-import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
+import { dropOptionalUnresolved, MY_TEAM_TOKEN, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { pageOffersSavedViews } from '../../utils/savedViewHelpers.js'
 import { normalizeSavedViewMenu, SAVED_VIEW_MENU_KEY, SAVED_VIEW_MENU_PREFIX, syncSavedViewMenu, toggleSavedViewMenuEntry, withSavedViewMenu } from '../../utils/savedViewMenu.js'
 import { passesContextPredicates } from '../../utils/visibleIfContext.js'
@@ -4475,7 +4476,13 @@ export default {
 		async _fetchMenuItemCount(item) {
 			try {
 				const { register, schema, filter } = item.count
-				const resolved = resolveFilterTokens(filter && typeof filter === 'object' ? filter : {}, {})
+				const raw = filter && typeof filter === 'object' ? filter : {}
+				// `@myTeam` counts as the list filters: once the team is read,
+				// every team the app answers, and without one no team at all.
+				if (Object.values(raw).some((value) => value === MY_TEAM_TOKEN || (Array.isArray(value) && value.includes(MY_TEAM_TOKEN)))) {
+					await loadMyTeam()
+				}
+				const resolved = dropOptionalUnresolved(resolveFilterTokens(raw, {}))
 				const url = generateUrl(`/apps/openregister/api/objects/${encodeURIComponent(register)}/${encodeURIComponent(schema)}`)
 				const { data } = await axios.get(url, { params: { _limit: 1, ...resolved } })
 				const total = data?.total

package/src/components/CnAssignDialog/CnAssignDialog.vue

@@ -89,6 +89,7 @@ import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcCheckboxRadioSwitch, NcTextArea } from '@nextcloud/vue'
 import { fetchEndpointSource, interpolateUrlTokens } from '../../composables/useEndpointSource.js'
 import { fillTemplate } from '../../utils/fillTemplate.js'
+import { groupSublines } from '../../utils/groupSublines.js'
 import { readPath } from '../../utils/readPath.js'
 import { searchNextcloudGroups, searchNextcloudUsers } from '../../utils/userAutocomplete.js'
 import { CnDialog } from '../CnDialog/index.js'
@@ -134,7 +135,10 @@ export function withTypedAssignee(found, typed, label) {
  *   `eyebrow` a template filled from the record.
  * - `source`: an endpointSource to read the record from, else `object`.
  * - `assignee`: `{ kinds?, label?, placeholder?, hint?, currentPath?,
- *   currentHint?, currentAs?, allowTyped?, field?, kindField? }`. `kinds` is `["group"]`
+ *   currentHint?, currentAs?, allowTyped?, field?, kindField?, describe? }`.
+ *   `describe` (`{ register, schema, groupField?, textField? }`) names the
+ *   records that hold a team's description; each team option then reads
+ *   "{count} members · {description}", the count where the viewer may read it. `kinds` is `["group"]`
  *   (default), `["user"]` or both; `currentPath` reads who has it now from the
  *   record and `currentHint` ("Now with {current}.", the placeholder named
  *   by `currentAs`) says so, in place of `hint`; `allowTyped`
@@ -398,8 +402,12 @@ export default {
 			if (seq !== this.searchSeq) {
 				return
 			}
+			const lines = await groupSublines(groups.map((g) => g.id), typed, this.assigneeConfig.describe || null)
+			if (seq !== this.searchSeq) {
+				return
+			}
 			const found = [
-				...groups.map((g) => ({ id: g.id, label: g.label, secondary: g.subline || '', icon: 'AccountGroupOutline', kind: 'group' })),
+				...groups.map((g) => ({ id: g.id, label: g.label, secondary: lines[g.id] || g.subline || '', icon: 'AccountGroupOutline', kind: 'group' })),
 				...users.map((u) => ({ id: u.id, label: u.label, secondary: u.subline || '', avatar: true, kind: 'user' })),
 			]
 			this.options = this.assigneeConfig.allowTyped ? withTypedAssignee(found, typed, t('nextcloud-vue', 'Use "{name}"', { name: typed })) : found

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -56,7 +56,7 @@
 		<!-- Built-in "label" widget: the value's label (an enum's translated
 		     label) as plain text, where a list wants words and no pill. -->
 		<template v-else-if="widget === 'label'">
-			<span v-if="hasValue" :title="rawTitle">{{ labelledValue }}</span>
+			<span v-if="hasValue" :title="rawTitle">{{ shownLabel }}</span>
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
 
@@ -65,7 +65,7 @@
 		     shapes it; the colour stays keyed on the raw value. -->
 		<template v-else-if="widget === 'badge'">
 			<CnStatusBadge v-if="hasValue"
-				:label="labelledValue"
+				:label="shownLabel"
 				:variant="badgeVariant"
 				:colorMap="badgeColorMap"
 				:colorKey="badgeColorKey"
@@ -438,7 +438,7 @@ import { ageInDays, boardDateLocale, formatAge, formatBoardDate, formatRelativeD
 import { daysUntil, parseDateValue, resolveDateVariant } from '../../utils/dateVariant.js'
 import { pillLook } from '../../utils/detailActionModel.js'
 import { resolveDue } from '../../utils/dueText.js'
-import { formatBoardDateTime } from '../../utils/fillTemplate.js'
+import { fillTemplate, formatBoardDateTime } from '../../utils/fillTemplate.js'
 import { formatMoney } from '../../utils/formatMetric.js'
 import { groupDisplayName, loadGroupDisplayName } from '../../utils/groupAutocomplete.js'
 import { objectFieldValue } from '../../utils/objectName.js'
@@ -1455,6 +1455,22 @@ export default {
 		 * @return {string}
 		 * @spec openspec/changes/cell-labels-and-draft-indicator/specs/cell-labels-and-draft-indicator/spec.md#requirement-a-built-in-cell-widget-shows-an-enum-value-by-its-label
 		 */
+		/**
+		 * What a `label` or `badge` cell shows: its label, worded by
+		 * `widgetProps.textTemplate` when given (translated, filled from the
+		 * row, `{value}` the label; DqPostvak "Lijkt op 2026-0079").
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/cell-text-template/specs/cell-text-template/spec.md
+		 */
+		shownLabel() {
+			const template = this.widgetProps && this.widgetProps.textTemplate
+			if (typeof template !== 'string' || template === '') {
+				return this.labelledValue
+			}
+			return fillTemplate(this.cnTranslate(template), { ...(this.row || {}), value: this.labelledValue })
+		},
+
 		labelledValue() {
 			if (!this.hasFormatter && this.isEnum && this.hasValue && typeof this.value !== 'object') {
 				return this.enumLabel
@@ -1721,8 +1737,9 @@ export default {
 
 		/**
 		 * The swatch colour — read from the sibling row field named by
-		 * `format.colorField` (default `'color'`). Returns null when no usable
-		 * colour string is present (the dot is then omitted).
+		 * `format.colorField` (default `'color'`), through `format.colorMap`
+		 * when given (a stored name such as `blue` to a CSS colour). Returns
+		 * null when no usable colour is present (the dot is then omitted).
 		 *
 		 * @return {string|null}
 		 */
@@ -1732,7 +1749,14 @@ export default {
 			}
 			const field = (this.format && this.format.colorField) || 'color'
 			const c = this.row && this.row[field]
-			return (typeof c === 'string' && c.trim() !== '') ? c : null
+			if (typeof c !== 'string' || c.trim() === '') {
+				return null
+			}
+			const map = this.format && this.format.colorMap
+			if (map && typeof map === 'object') {
+				return typeof map[c] === 'string' && map[c] !== '' ? map[c] : null
+			}
+			return c
 		},
 
 		formattedValue() {

package/src/components/CnChartWidget/CnChartWidget.md

@@ -109,6 +109,7 @@ Fallback slot — shown when ApexCharts is not available:
 | `barMax` | Number | `null` | `bar-list`: the value a full track stands for (100 for percentages); null takes the largest value |
 | `matrixLabelWidth` | Number | `null` | `matrix`: the row-label column's width in px; a long label wraps (DqProcesanalyse "Dagen per fase": 240). Null sizes the column to its longest label, at least 120px |
 | `footnote` | String | `''` | A line under the chart, through the host's translate: under the rows of a `bar-list` or `matrix`, under the plot of a `line`, `area` or `bar` chart |
+| `notice` | Object | `null` | A toned note card under the chart: `{ lead?, text?, values?, labels?, tone? }`. `{name}` in `lead` (bold) and `text` is filled from `values[name]`, a literal or a record token (`@object.<field>`); `labels[name]` (`"rows"`, `"columns"`, `"values"` or a map) turns a key into words. `tone`: info, success, warning, error. Hidden while a value is missing |
 | `referenceLines` | Array | `[]` | Dashed horizontal reference lines on the value axis of a line, area or bar chart, such as a norm: `[{ value, label?, color? }]`. The label goes through the host's translate; the colour defaults to the theme's error colour (board DqDoorlooptijd). `valuePath` reads the value from the endpoint answer instead, `{value}` in the label writes it, and a line without a value is not drawn. |
 | `categoryFormat` | String | `''` | How date categories read on the x-axis: `month` ("jan") or `month-year` ("jan 2026"), in the user's language, or `week` for ISO week keys ("2026-W40" as "w40"). Categories that are not dates are left as is; a bare year key stays a year. |
 | `emptyCellLabel` | String | `''` | `matrix`: the text of a cell without a value ("geen"), through the host's translate. Empty leaves the cell blank |
@@ -134,3 +135,4 @@ The `dataSource` OBJECT-form `aggregate` (Wave 3, #91) — `{ groupBy, metric?:
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `widgetId` | String | `''` | Matches `cn:widget:refresh` event-bus events; on a matching id the chart re-queries its `dataSource`. Also exposes a ref-callable `refresh()`. |
+| `barValueAtEnd` | Boolean | `false` | A `bar-list` without a track: each bar as long as its share and its value right after the bar's end (DqProcesanalyse "Doorlooptijd per status"). False keeps the track and the value column. |

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -65,7 +65,7 @@
 		     share of `barMax` (default the largest value), the value at the
 		     end. Rows navigate when the source declares a drilldown. -->
 		<div v-else-if="type === 'bar-list'" class="cn-chart-widget__html" data-testid="cn-chart-widget-bar-list">
-			<ul class="cn-chart-widget__bar-list">
+			<ul class="cn-chart-widget__bar-list" :class="{ 'cn-chart-widget__bar-list--value-at-end': barValueAtEnd }">
 				<li v-for="row in barListRows" :key="row.index" class="cn-chart-widget__bar-row">
 					<component
 						:is="row.drill ? 'button' : 'div'"
@@ -75,10 +75,16 @@
 						data-testid="cn-chart-widget-bar-row"
 						@click="row.drill ? onDataPointSelection(null, null, { dataPointIndex: row.index }) : null">
 						<span class="cn-chart-widget__bar-label">{{ row.label }}</span>
-						<span class="cn-chart-widget__bar-track" aria-hidden="true">
-							<span class="cn-chart-widget__bar-fill" :style="{ width: `${row.share}%` }" />
+						<span v-if="barValueAtEnd" class="cn-chart-widget__bar-track">
+							<span class="cn-chart-widget__bar-fill" aria-hidden="true" :style="{ flexBasis: `${row.share}%` }" />
+							<span class="cn-chart-widget__bar-value">{{ row.text }}</span>
 						</span>
-						<span class="cn-chart-widget__bar-value">{{ row.text }}</span>
+						<template v-else>
+							<span class="cn-chart-widget__bar-track" aria-hidden="true">
+								<span class="cn-chart-widget__bar-fill" :style="{ width: `${row.share}%` }" />
+							</span>
+							<span class="cn-chart-widget__bar-value">{{ row.text }}</span>
+						</template>
 					</component>
 				</li>
 			</ul>
@@ -148,12 +154,25 @@
 			data-testid="cn-chart-widget-footnote">
 			{{ hostTranslate(footnote) }}
 		</p>
+		<!-- `notice`: a toned note card under the chart whose words carry
+		     values from the page record (DqHandhaving "Advies: ..."). -->
+		<NcNoteCard
+			v-if="noticeParts"
+			:type="noticeParts.type"
+			:data-tone="noticeParts.type"
+			class="cn-chart-widget__notice"
+			data-testid="cn-chart-widget-notice">
+			<p class="cn-chart-widget__notice-text">
+				<strong v-if="noticeParts.lead">{{ noticeParts.lead }}</strong>{{ noticeParts.lead && noticeParts.text ? ' ' : '' }}{{ noticeParts.text }}
+			</p>
+		</NcNoteCard>
 	</div>
 </template>
 
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { getLanguage, translate as t } from '@nextcloud/l10n'
+import { NcNoteCard } from '@nextcloud/vue'
 import { inject, markRaw, ref } from 'vue'
 import VueApexCharts from 'vue3-apexcharts'
 import { useDataSource } from '../../composables/useDataSource.js'
@@ -405,7 +424,7 @@ function formatterFor(vf) {
 export default {
 	name: 'CnChartWidget',
 
-	components: { CnEndpointNotice },
+	components: { CnEndpointNotice, NcNoteCard },
 
 	inject: {
 		/**
@@ -455,6 +474,18 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * A `bar-list` without a track: each bar as long as its share and its
+		 * value right after the bar's end (DqProcesanalyse "Doorlooptijd per
+		 * status"). False, the default, keeps the track and the value column.
+		 *
+		 * @spec openspec/changes/chart-bar-list-value-at-end/specs/chart-bar-list-value-at-end/spec.md#requirement-a-bar-list-can-put-each-value-at-its-bars-end
+		 */
+		barValueAtEnd: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * A `matrix`'s row-label column width in px. Null, the default, sizes
 		 * the column to its longest label (at least 120px); a width wraps a
@@ -467,6 +498,24 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * A toned note card under the chart whose words carry values from the
+		 * page record: `{ lead?, text?, values?, labels?, tone? }`. `lead`
+		 * (bold) and `text` go through the host's translate, then each
+		 * `{name}` is filled from `values[name]`, a literal or a token such as
+		 * `@object.recommendedIntervention`. `labels[name]` turns a key into
+		 * words: `"rows"`, `"columns"` or `"values"` read the matrix's
+		 * cellSource label maps, an object is its own map. `tone` is info
+		 * (default), success, warning or error. Hidden while a value is
+		 * missing, so a half-filled sentence never shows.
+		 *
+		 * @spec openspec/changes/chart-notice/specs/chart-notice/spec.md#requirement-a-chart-can-carry-a-notice-with-record-values
+		 */
+		notice: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * A line under the chart ("Klik een balk om de zaken te zien"),
 		 * through the host's translate: under the rows of a `bar-list` or
@@ -1601,6 +1650,38 @@ export default {
 			}
 		},
 
+		/**
+		 * The notice's bold lead, text and note-card type, values filled in;
+		 * null when there is none or a value is missing.
+		 *
+		 * @return {{lead: string, text: string, type: string}|null} The notice.
+		 * @spec openspec/changes/chart-notice/specs/chart-notice/spec.md#requirement-a-chart-can-carry-a-notice-with-record-values
+		 */
+		noticeParts() {
+			const def = this.notice
+			if (!def || typeof def !== 'object' || (!def.lead && !def.text)) {
+				return null
+			}
+			const declared = def.values && typeof def.values === 'object' ? def.values : {}
+			const resolved = resolveFilterTokens(declared, this.chartTokenCtx())
+			const source = this.cellSource && typeof this.cellSource === 'object' ? this.cellSource : {}
+			const maps = { rows: source.rowLabels, columns: source.columnLabels, values: source.valueLabels }
+			const words = {}
+			for (const name of Object.keys(declared)) {
+				const raw = resolved[name]
+				if (raw === null || raw === undefined || raw === '' || (typeof raw === 'string' && raw.charAt(0) === '@')) {
+					return null
+				}
+				const ref = def.labels && def.labels[name]
+				const map = typeof ref === 'string' ? maps[ref] : ref
+				const label = map && typeof map === 'object' && typeof map[String(raw)] === 'string' ? map[String(raw)] : null
+				words[name] = label ? this.hostTranslate(label) : String(raw)
+			}
+			const fill = (key) => (key ? this.hostTranslate(key).replace(/\{(\w+)\}/g, (match, name) => (name in words ? words[name] : match)) : '')
+			const type = ['info', 'success', 'warning', 'error'].includes(def.tone) ? def.tone : 'info'
+			return { lead: fill(def.lead), text: fill(def.text), type }
+		},
+
 		/**
 		 * The matrix cell of the record (`highlight: { row, column }`, tokens
 		 * such as `@object.behaviour` resolved), as row and column indexes. A
@@ -2943,11 +3024,46 @@ export default {
 	white-space: nowrap;
 }
 
+/* `barValueAtEnd`: no track; the bar takes its share of the row and gives way
+   to the value right after its end, so the longest bar still fits. */
+.cn-chart-widget__bar-list--value-at-end .cn-chart-widget__bar-line {
+	grid-template-columns: minmax(80px, 130px) minmax(0, 1fr);
+}
+
+.cn-chart-widget__bar-list--value-at-end .cn-chart-widget__bar-track {
+	align-items: center;
+	background: none;
+	display: flex;
+	gap: 6px;
+	height: auto;
+	overflow: visible;
+}
+
+.cn-chart-widget__bar-list--value-at-end .cn-chart-widget__bar-fill {
+	border-radius: 4px;
+	flex: 0 1 auto;
+	height: 18px;
+	min-width: 2px;
+}
+
+.cn-chart-widget__bar-list--value-at-end .cn-chart-widget__bar-value {
+	flex: none;
+	text-align: start;
+}
+
 .cn-chart-widget__footnote {
 	color: var(--color-text-maxcontrast);
 	margin: 0;
 }
 
+.cn-chart-widget__notice {
+	margin: 12px 0 0;
+}
+
+.cn-chart-widget__notice-text {
+	margin: 0;
+}
+
 /* Under an ApexCharts plot the footnote is a sibling of the canvas, so it keeps
    its own line height while the canvas takes the rest of a fitted column. */
 .cn-chart-widget > .cn-chart-widget__footnote {

package/src/components/CnConversationThread/CnConversationWidget.vue

@@ -6,6 +6,7 @@
 <template>
 	<div class="cn-case-widget-card">
 		<CnConversationThread
+			ref="thread"
 			:messages="messages"
 			:title="tr(content.title || '')"
 			:subtitle="tr(content.subtitle || '')"
@@ -34,7 +35,7 @@
 					data-testid="cn-conversation-templates"
 					@apply="applyTemplate($event, setDraft)" />
 			</template>
-			<template v-if="replyOptions.length > 0" #reply-actions>
+			<template v-if="replyOptions.length > 0 || draftUrl" #reply-actions="{ draft }">
 				<NcCheckboxRadioSwitch
 					v-for="option in replyOptions"
 					:key="option.key"
@@ -42,6 +43,19 @@
 					:data-testid="`cn-conversation-option-${option.key}`">
 					{{ tr(option.label) }}
 				</NcCheckboxRadioSwitch>
+				<span v-if="draftUrl && draftStatus"
+					class="cn-conversation-widget__draft-status"
+					role="status"
+					data-testid="cn-conversation-draft-status">
+					{{ draftStatus }}
+				</span>
+				<NcButton
+					v-if="draftUrl"
+					data-testid="cn-conversation-save-draft"
+					:disabled="savingDraft"
+					@click="saveDraft(draft)">
+					{{ t('nextcloud-vue', 'Save as draft') }}
+				</NcButton>
 			</template>
 			<template v-if="headerAction || statusBadgeText" #header-actions>
 				<span v-if="statusBadgeText"
@@ -71,11 +85,13 @@
 
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { translate as t } from '@nextcloud/l10n'
 import { NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import CnTemplateSelect from '../CnTemplateSelect/CnTemplateSelect.vue'
 import CnConversationThread from './CnConversationThread.vue'
 import { dispatchAction } from '../../utils/actionsDispatcher.js'
+import { formatTimeOfDay } from '../../utils/boardDate.js'
 import { fetchReferenceObjects } from '../../utils/boardReferenceColumns.js'
 import { readPath } from '../../utils/readPath.js'
 import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveFilterTokens.js'
@@ -178,6 +194,10 @@ export default {
 			acting: '',
 			/** The threads `statusBadge` reads. */
 			badgeRows: [],
+			/** What the last draft save said: when it was saved, or that it failed. */
+			draftStatus: '',
+			/** Whether a draft is being saved. */
+			savingDraft: false,
 		}
 	},
 
@@ -315,6 +335,21 @@ export default {
 		 * @return {string} The URL, or '' when the content names none.
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-conversation-thread
 		 */
+		/**
+		 * The reply draft's url (`content.draft.url`, `@objectId` filled in),
+		 * or '' without one.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/conversation-reply-draft/specs/conversation-reply-draft/spec.md#requirement-a-reply-can-be-saved-as-a-draft-and-comes-back
+		 */
+		draftUrl() {
+			const url = this.content.draft && this.content.draft.url
+			if (typeof url !== 'string' || url === '') {
+				return ''
+			}
+			return url.replace(/@objectId/g, encodeURIComponent(String(this.objectId ?? '')))
+		},
+
 		endpoint() {
 			const url = this.content.endpoint
 			if (typeof url !== 'string' || url === '') {
@@ -340,19 +375,101 @@ export default {
 			handler() {
 				this.loadSource()
 				this.loadBadge()
+				this.loadDraft()
 			},
 		},
 	},
 
 	mounted() {
 		subscribe('cn:page:refresh', this.onPageRefresh)
+		subscribe('cn:conversation:reply-sent', this.onReplySentElsewhere)
 	},
 
 	beforeUnmount() {
 		unsubscribe('cn:page:refresh', this.onPageRefresh)
+		unsubscribe('cn:conversation:reply-sent', this.onReplySentElsewhere)
 	},
 
 	methods: {
+		t,
+
+		/**
+		 * Read the saved reply draft into the reply box.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/conversation-reply-draft/specs/conversation-reply-draft/spec.md#requirement-a-reply-can-be-saved-as-a-draft-and-comes-back
+		 */
+		async loadDraft() {
+			if (!this.draftUrl) {
+				return
+			}
+			try {
+				const { default: axios } = await import('@nextcloud/axios')
+				const { generateUrl } = await import('@nextcloud/router')
+				const { data } = await axios.get(generateUrl(this.draftUrl))
+				const text = data && typeof data.text === 'string' ? data.text : ''
+				if (text !== '' && this.$refs.thread) {
+					this.$refs.thread.setDraft(text)
+				}
+			} catch {
+				// No saved draft to read leaves the box empty.
+			}
+		},
+
+		/**
+		 * Store the reply box as the draft and say when it was saved.
+		 *
+		 * @param {string} text The reply box's text.
+		 * @return {Promise<void>}
+		 */
+		async saveDraft(text) {
+			this.savingDraft = true
+			try {
+				await this.storeDraft(String(text ?? ''))
+				this.draftStatus = t('nextcloud-vue', 'Draft saved at {time}', { time: formatTimeOfDay(new Date()) })
+			} catch {
+				this.draftStatus = t('nextcloud-vue', 'The draft could not be saved')
+			} finally {
+				this.savingDraft = false
+			}
+		},
+
+		/**
+		 * A reply on this record went out through a dialog or another surface
+		 * (`cn:conversation:reply-sent` with `{ objectId }`): the saved draft
+		 * and the reply box are cleared.
+		 *
+		 * @param {{objectId?: string}} payload The record the reply was on.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/conversation-reply-draft/specs/conversation-reply-draft/spec.md#requirement-a-reply-can-be-saved-as-a-draft-and-comes-back
+		 */
+		async onReplySentElsewhere(payload) {
+			if (!this.draftUrl || String(payload?.objectId ?? '') !== String(this.objectId ?? '')) {
+				return
+			}
+			if (this.$refs.thread) {
+				this.$refs.thread.setDraft('')
+			}
+			this.draftStatus = ''
+			try {
+				await this.storeDraft('')
+			} catch {
+				// The next save overwrites a draft that could not be cleared.
+			}
+		},
+
+		/**
+		 * PUT the draft text.
+		 *
+		 * @param {string} text The text; '' clears the draft.
+		 * @return {Promise<void>}
+		 */
+		async storeDraft(text) {
+			const { default: axios } = await import('@nextcloud/axios')
+			const { generateUrl } = await import('@nextcloud/router')
+			await axios.put(generateUrl(this.draftUrl), { text })
+		},
+
 		/**
 		 * Read the messages again when the page refreshes (a dialog sent one).
 		 *
@@ -691,6 +808,9 @@ export default {
 			if (typeof text !== 'string' || text === '') {
 				return
 			}
+			if (this.draftUrl) {
+				this.storeDraft('')
+			}
 			this.sentHere.push({
 				id: `sent-${this.sentHere.length}`,
 				time: new Date().toISOString(),
@@ -722,4 +842,9 @@ export default {
 	border-radius: var(--border-radius-large);
 	padding: calc(5 * var(--default-grid-baseline));
 }
+
+.cn-conversation-widget__draft-status {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
 </style>

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -1150,6 +1150,7 @@ const CHART_PROP_KEYS = [
 	'endpointSource',
 	// `bar-list` / `matrix` presentation keys.
 	'barMax',
+	'barValueAtEnd',
 	'matrixLabelWidth',
 	'footnote',
 	'highlight',

package/src/components/CnDataTable/CnDataTable.vue

@@ -6,6 +6,7 @@
 			'cn-table-container--board': isBoardLook,
 			'cn-table-container--title-plain': isBoardLook && rowTitle === 'plain',
 			'cn-table-container--title-text': isBoardLook && rowTitle === 'text',
+			'cn-table-container--title-strong': isBoardLook && rowTitle === 'strong',
 			'cn-table-container--scrollable': scrollable,
 			'cn-table-container--borderless': borderless,
 			'cn-table-container--fill': fillHeight,
@@ -856,8 +857,10 @@ export default {
 		 * the 15px bold title without an underline and a 13px muted secondary
 		 * line, as the PqTickets and OcPublicaties boards draw it; `text` is an
 		 * ordinary cell, for a log table whose first column is a date
-		 * (DqZaakContact). The row stays clickable either way. The Nextcloud
-		 * look ignores it.
+		 * (DqZaakContact); `strong` is the cell's own size at weight 600 in the
+		 * main ink without an underline, the name column of a card's list
+		 * (DqZaaktypeStatussen). The row stays clickable either way. The
+		 * Nextcloud look ignores it.
 		 *
 		 * @spec openspec/changes/screens-table-rows-parity/specs/index-list-board-look/spec.md#requirement-a-row-title-can-be-plain-text
 		 * @spec openspec/changes/board-log-table-plain-cells/specs/board-log-table-plain-cells/spec.md#requirement-a-tables-title-column-can-read-as-plain-text
@@ -865,7 +868,7 @@ export default {
 		rowTitle: {
 			type: String,
 			default: 'link',
-			validator: (value) => ['link', 'plain', 'text'].includes(value),
+			validator: (value) => ['link', 'plain', 'text', 'strong'].includes(value),
 		},
 
 		/**