@conduction/nextcloud-vue 2.59.0 → 2.60.0

package/src/components/CnHeaderWidget/CnHeaderWidget.vue

@@ -4,15 +4,22 @@
 -->
 
 <template>
-	<div class="cn-header-widget" :style="wrapperStyle">
+	<div class="cn-header-widget" :class="{ 'cn-header-widget--plain': isPlain }" :style="wrapperStyle">
 		<div
 			v-if="hasOverlay"
 			class="cn-header-widget__overlay"
 			:style="overlayStyle"
 			aria-hidden="true" />
 		<div class="cn-header-widget__content" :style="contentStyle">
+			<p
+				v-if="dateLine"
+				class="cn-header-widget__date"
+				:style="dateStyle"
+				data-testid="cn-header-widget-date">
+				{{ dateLine }}
+			</p>
 			<h2 v-if="hasTitle" class="cn-header-widget__title" :style="textStyle">
-				{{ title }}
+				{{ headingText }}
 			</h2>
 			<p v-if="hasSubtitle" class="cn-header-widget__subtitle" :style="textStyle">
 				{{ subtitle }}
@@ -38,7 +45,8 @@
 </template>
 
 <script>
-import { translate as t } from '@nextcloud/l10n'
+import { getCurrentUser } from '@nextcloud/auth'
+import { getCanonicalLocale, translate as t } from '@nextcloud/l10n'
 import { resolveImageUrl } from '../../utils/resolveImageUrl.js'
 
 const ALLOWED_OVERLAY_MODES = ['none', 'tint', 'gradient-bottom']
@@ -75,6 +83,16 @@ const VERTICAL_ALIGN_FLEX = Object.freeze({
  * External CTA URLs (http/https) open in a new tab with
  * `rel="noopener noreferrer"`; relative / anchor URLs stay in the current tab.
  *
+ * Optional greeting: `greeting: true` makes the heading greet the signed-in
+ * user by time of day and first name ("Good afternoon, Pieter"; `"full"` uses
+ * the whole display name), and `showDate: true` adds a line with today's
+ * date above it. `plain: true` drops the coloured background and aligns the
+ * text to the start, which is how a greeting usually sits on a dashboard.
+ *
+ * ```json
+ * { "widgetKey": "header", "props": { "content": { "greeting": true, "showDate": true, "plain": true } } }
+ * ```
+ *
  * Registered as the `header` dashboard widget type via the renderer's
  * `index.js`.
  */
@@ -96,9 +114,10 @@ export default {
 		/**
 		 * Persisted widget content: `{title, subtitle, backgroundImageUrl,
 		 * backgroundImageFileId, backgroundColor, overlayMode, overlayColor,
-		 * overlayOpacity, textColor, textAlign, verticalAlign, height, cta}`.
-		 * All fields are optional except `title`; unknown enum values collapse
-		 * to documented defaults and the renderer never throws.
+		 * overlayOpacity, textColor, textAlign, verticalAlign, height, cta,
+		 * greeting, showDate, plain}`. All fields are optional except `title`
+		 * (or `greeting`); unknown enum values collapse to documented defaults
+		 * and the renderer never throws.
 		 *
 		 * @type {object}
 		 */
@@ -118,6 +137,17 @@ export default {
 			default: null,
 		},
 		/* eslint-enable vue/no-unused-properties */
+
+		/**
+		 * The moment the greeting and the date line are computed for. Leave
+		 * empty for the current time.
+		 *
+		 * @type {Date|null}
+		 */
+		now: {
+			type: Date,
+			default: null,
+		},
 	},
 
 	data() {
@@ -153,9 +183,121 @@ export default {
 			return typeof value === 'string' && value !== '' ? this.effectiveTranslate(value) : ''
 		},
 
-		/** Whether a non-empty title is set. */
+		/** Whether a heading renders: a non-empty title or a greeting. */
 		hasTitle() {
-			return this.title !== ''
+			return this.headingText !== ''
+		},
+
+		/**
+		 * The moment the greeting and date line are computed for.
+		 *
+		 * @return {Date}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		reference() {
+			return this.now instanceof Date ? this.now : new Date()
+		},
+
+		/**
+		 * Whether the plain presentation is on (no coloured background).
+		 *
+		 * @return {boolean}
+		 */
+		isPlain() {
+			return Boolean(this.content && this.content.plain === true)
+		},
+
+		/**
+		 * The name the greeting uses: the first word of the display name, or
+		 * the whole display name for `greeting: "full"`. '' when unknown.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		greetingName() {
+			let user
+			try {
+				user = getCurrentUser()
+			} catch {
+				user = null
+			}
+			const displayName = (user && typeof user.displayName === 'string') ? user.displayName.trim() : ''
+			if (displayName === '') {
+				return ''
+			}
+			return this.content.greeting === 'full' ? displayName : displayName.split(/\s+/)[0]
+		},
+
+		/**
+		 * The greeting for the time of day, with the user's name when known,
+		 * or '' when the greeting is off.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		greetingText() {
+			const greeting = this.content && this.content.greeting
+			if (greeting !== true && greeting !== 'full' && greeting !== 'first') {
+				return ''
+			}
+			const hour = this.reference.getHours()
+			const name = this.greetingName
+			if (hour < 12) {
+				return name ? t('nextcloud-vue', 'Good morning, {name}', { name }) : t('nextcloud-vue', 'Good morning')
+			}
+			if (hour < 18) {
+				return name ? t('nextcloud-vue', 'Good afternoon, {name}', { name }) : t('nextcloud-vue', 'Good afternoon')
+			}
+			return name ? t('nextcloud-vue', 'Good evening, {name}', { name }) : t('nextcloud-vue', 'Good evening')
+		},
+
+		/**
+		 * The heading: the greeting when it is on, else the title.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		headingText() {
+			return this.greetingText || this.title
+		},
+
+		/**
+		 * Today's date written out ("Monday 5 October 2026"), or '' when
+		 * `showDate` is off.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		dateLine() {
+			if (!this.content || this.content.showDate !== true) {
+				return ''
+			}
+			const options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }
+			let locale
+			try {
+				locale = getCanonicalLocale()
+			} catch {
+				locale = undefined
+			}
+			try {
+				return new Intl.DateTimeFormat(locale || undefined, options).format(this.reference)
+			} catch {
+				return new Intl.DateTimeFormat(undefined, options).format(this.reference)
+			}
+		},
+
+		/**
+		 * Inline style of the date line: the heading's colour, or the muted
+		 * text colour on a plain header.
+		 *
+		 * @return {object}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		dateStyle() {
+			return {
+				color: this.isPlain && !(this.content && this.content.textColor) ? 'var(--color-text-maxcontrast)' : this.textColor,
+				margin: 0,
+			}
 		},
 
 		/** Whether a non-empty subtitle is set. */
@@ -187,12 +329,19 @@ export default {
 			return this.backgroundImageUrl !== '' && this.imageFailed === false
 		},
 
-		/** Resolved background colour (default theme primary). */
+		/**
+		 * Resolved background colour (default theme primary).
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
 		backgroundColor() {
 			const value = this.content && this.content.backgroundColor
 			if (typeof value === 'string' && value !== '') {
 				return value
 			}
+			if (this.isPlain) {
+				return 'transparent'
+			}
 			return 'var(--color-primary, #0070c0)'
 		},
 
@@ -250,13 +399,17 @@ export default {
 			return HEIGHT_PIXELS[this.height]
 		},
 
-		/** Resolved text alignment (default `center`). */
+		/**
+		 * Resolved text alignment (default `center`).
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
 		textAlign() {
 			const declared = this.content && this.content.textAlign
 			if (typeof declared === 'string' && ALLOWED_TEXT_ALIGN.includes(declared)) {
 				return declared
 			}
-			return 'center'
+			return this.isPlain ? 'left' : 'center'
 		},
 
 		/** Resolved vertical alignment (default `middle`). */
@@ -268,7 +421,11 @@ export default {
 			return 'middle'
 		},
 
-		/** Resolved text colour with an auto-contrast fallback. */
+		/**
+		 * Resolved text colour with an auto-contrast fallback.
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
 		textColor() {
 			const value = this.content && this.content.textColor
 			if (typeof value === 'string' && value !== '') {
@@ -277,6 +434,9 @@ export default {
 			if (this.hasBackgroundImage) {
 				return '#ffffff'
 			}
+			if (this.isPlain && !(this.content && this.content.backgroundColor)) {
+				return 'var(--color-main-text)'
+			}
 			return this.isLightColor(this.backgroundColor) ? '#000000' : '#ffffff'
 		},
 
@@ -321,7 +481,11 @@ export default {
 			}
 		},
 
-		/** Inline style for the content flex container. */
+		/**
+		 * Inline style for the content flex container.
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
 		contentStyle() {
 			return {
 				position: 'relative',
@@ -332,7 +496,7 @@ export default {
 				'flex-direction': 'column',
 				'align-items': this.flexAlignFromTextAlign,
 				'justify-content': VERTICAL_ALIGN_FLEX[this.verticalAlign],
-				padding: '16px 24px',
+				padding: this.isPlain ? '0' : '16px 24px',
 				'box-sizing': 'border-box',
 				gap: '8px',
 				'text-align': this.textAlign,
@@ -484,6 +648,17 @@ export default {
 	overflow: hidden;
 }
 
+.cn-header-widget--plain {
+	min-height: 0;
+	border-radius: 0;
+}
+
+.cn-header-widget__date {
+	font-size: 14px;
+	line-height: 1.4;
+	margin: 0;
+}
+
 .cn-header-widget__overlay {
 	position: absolute;
 	inset: 0;

package/src/components/CnHeaderWidgetForm/CnHeaderWidgetForm.vue

@@ -18,6 +18,22 @@
 			:placeholder="t('nextcloud-vue', 'Optional subtitle')"
 			@update:modelValue="updateField('subtitle', $event)" />
 
+		<NcCheckboxRadioSwitch
+			:modelValue="greeting"
+			@update:modelValue="updateField('greeting', $event)">
+			{{ t('nextcloud-vue', 'Greet the user by name instead of showing the title') }}
+		</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch
+			:modelValue="showDate"
+			@update:modelValue="updateField('showDate', $event)">
+			{{ t('nextcloud-vue', 'Show the date of today above the heading') }}
+		</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch
+			:modelValue="plain"
+			@update:modelValue="updateField('plain', $event)">
+			{{ t('nextcloud-vue', 'Plain header without a coloured background') }}
+		</NcCheckboxRadioSwitch>
+
 		<!-- Pick a background image. Selection does NOT upload — the file is held
 		     and only uploaded when the host modal calls commit() on submit, so
 		     re-picking or cancelling writes nothing. Uploads are the reliable
@@ -162,7 +178,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { NcButton, NcSelect, NcTextField } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcSelect, NcTextField } from '@nextcloud/vue'
 import CnColorPicker from '../CnColorPicker/CnColorPicker.vue'
 import { embedAsDataUrl, extractTransportUrl, readFileAsDataUrl, warnUploadFnDeprecated } from '../../utils/widgetUpload.js'
 
@@ -206,6 +222,7 @@ export default {
 		NcTextField,
 		NcSelect,
 		NcButton,
+		NcCheckboxRadioSwitch,
 		CnColorPicker,
 	},
 
@@ -282,6 +299,11 @@ export default {
 		return {
 			title: typeof initial.title === 'string' ? initial.title : DEFAULT_CONTENT.title,
 			subtitle: typeof initial.subtitle === 'string' ? initial.subtitle : DEFAULT_CONTENT.subtitle,
+			greeting: initial.greeting === true || initial.greeting === 'full' || initial.greeting === 'first',
+			// `"full"` (whole display name) is a manifest choice; kept as written.
+			greetingMode: initial.greeting === 'full' ? 'full' : true,
+			showDate: initial.showDate === true,
+			plain: initial.plain === true,
 			backgroundImageUrl: typeof initial.backgroundImageUrl === 'string'
 				? initial.backgroundImageUrl
 				: DEFAULT_CONTENT.backgroundImageUrl,
@@ -394,9 +416,35 @@ export default {
 			}
 		},
 
-		/** The full content blob assembled from the current field values. */
+		/**
+		 * The greeting keys, written only when they are on, so a header that
+		 * never used them keeps the content blob it always had.
+		 *
+		 * @return {object}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
+		greetingContent() {
+			const content = {}
+			if (this.greeting) {
+				content.greeting = this.greetingMode
+			}
+			if (this.showDate) {
+				content.showDate = true
+			}
+			if (this.plain) {
+				content.plain = true
+			}
+			return content
+		},
+
+		/**
+		 * The full content blob assembled from the current field values.
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 */
 		assembledContent() {
 			return {
+				...this.greetingContent,
 				title: this.title,
 				subtitle: this.subtitle,
 				backgroundImageUrl: this.backgroundImageUrl,
@@ -538,10 +586,12 @@ export default {
 		 * when either CTA field is filled.
 		 *
 		 * @return {string[]} the validation errors.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
 		 */
 		validate() {
 			const errors = []
-			if (typeof this.title !== 'string' || this.title.trim() === '') {
+			// A greeting is the heading, so a greeting header needs no title.
+			if (!this.greeting && (typeof this.title !== 'string' || this.title.trim() === '')) {
 				errors.push(t('nextcloud-vue', 'Title is required'))
 			}
 			if (typeof this.backgroundImageUrl === 'string'

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -119,6 +119,7 @@
 					:views="viewsForControl"
 					:loading="savedViewsLoading"
 					:currentUserId="currentSavedViewsUserId"
+					:counts="savedViewCounts"
 					@apply="onApplySavedView"
 					@saveRequest="showSaveViewDialog = true"
 					@deleteRequest="onDeleteViewRequest" />
@@ -171,6 +172,7 @@
 					:multiple="quickFilterMultiple"
 					:activeIndex="activeQuickFilterIndex"
 					:selectedIndices="selectedQuickFilterIndices"
+					:counts="tabCounts"
 					@update:activeIndex="onQuickFilterChange"
 					@update:selectedIndices="onQuickFilterMultiChange" />
 			</template>
@@ -545,6 +547,7 @@
 					:statusField="board.statusField || 'status'"
 					:cardFields="board.cardFields || []"
 					:swimlaneField="board.swimlaneField || ''"
+					:dueRule="board.dueRule || null"
 					:rowKey="rowKey"
 					:runTransition="runTransition"
 					:paged="isPaged"
@@ -781,12 +784,14 @@ import { useSavedViewsApi } from '../../composables/useSavedViewsApi.js'
 import { METADATA_COLUMNS } from '../../constants/metadata.js'
 import { routeHref } from '../../utils/actionLink.js'
 import { buildOnSuccessRoute, resolveRegisteredHandler } from '../../utils/actionsDispatcher.js'
+import { fetchFilterCounts } from '../../utils/fetchFilterCounts.js'
 import { buildExportUrl } from '../../utils/indexExportHelpers.js'
 import { openRowTarget } from '../../utils/linkNavigation.js'
-import { resolveClaimedTeams, resolveClaimTokens, splitViewsIntoTabs, viewAsTab } from '../../utils/listLenses.js'
+import { resolveClaimedTeams, resolveClaimTokens, splitViewsIntoTabs, viewAsTab, viewIdOf } from '../../utils/listLenses.js'
 import { LIST_SHORTCUTS, listPaletteCommands, shortcutFor } from '../../utils/listShortcuts.js'
 import { multiKeySort } from '../../utils/multiKeySort.js'
 import { resolveDeepTokens, resolveFilterValue } from '../../utils/resolveFilterTokens.js'
+import { resolveFilterMap } from '../../utils/routeFilters.js'
 import { availableRowActions, DEFAULT_ROW_ACTION_FIELD, refusalReasonFor, undeclaredRowActions } from '../../utils/rowActionAvailability.js'
 import { isNewTabClick, isNewTabHandled, isRowMiddleClick, markNewTabHandled, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 import { DEFAULT_ROW_INDICATOR_CAP } from '../../utils/rowIndicators.js'
@@ -1199,7 +1204,6 @@ export default {
 			default: null,
 		},
 
-		/* eslint-disable vue/no-unused-properties -- used in useSelfFetchList */
 		/**
 		 * Base filter for the self-fetch path. String values of the form
 		 * `"@route.<name>"` / `":<name>"` are interpolated from `$route.params`.
@@ -1208,7 +1212,6 @@ export default {
 			type: Object,
 			default: null,
 		},
-		/* eslint-enable vue/no-unused-properties */
 
 		/**
 		 * Self-fetch mode only — an array of clickable filter tabs rendered as
@@ -2211,6 +2214,19 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * Which saved views show how many records they match: `true` for all
+		 * of them (tabs and the entries in the views control), or a list of
+		 * view ids. Off by default, so no count request is made. A quick
+		 * filter opts in on its own entry with `showCount: true`.
+		 *
+		 * @type {boolean|string[]}
+		 */
+		viewCounts: {
+			type: [Boolean, Array],
+			default: false,
+		},
+
 		/**
 		 * The teams this person may claim. The instance decides this list; it
 		 * is the membership side of `claimedTeams`.
@@ -2649,6 +2665,10 @@ export default {
 	data() {
 		return {
 			currentViewMode: this.viewMode,
+			/** Count per tab-strip index, for the entries that asked for one; null = none. */
+			tabCounts: null,
+			/** Count per saved-view id, for the views control; null = none. */
+			savedViewCounts: null,
 			/**
 			 * The non-`_` query keys this page owns, i.e. may clear on the next
 			 * persist. Seeded with what it adopted from the query on load, and
@@ -3241,6 +3261,55 @@ export default {
 			return this.splitSavedViews.control
 		},
 
+		/**
+		 * The filters whose record count this page shows: quick filters that
+		 * set `showCount`, and the saved views `viewCounts` names. Empty when
+		 * nothing opted in, which is what keeps the page from making a count
+		 * request nobody asked for.
+		 *
+		 * @return {Array<{key: string, filter: object}>} The filters to count.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		countEntries() {
+			const entries = []
+			const tabs = this.tabStripEntries || []
+			const lens = this.lensTabs.length > 0
+			tabs.forEach((tab, index) => {
+				const wants = lens ? this.viewWantsCount(tab.id) : (tab && tab.showCount === true)
+				if (wants && tab.narrowsToNothing !== true) {
+					entries.push({ key: `tab:${index}`, filter: tab.filter || {} })
+				}
+			})
+			for (const view of this.viewsForControl) {
+				const id = viewIdOf(view)
+				if (this.viewWantsCount(id)) {
+					entries.push({ key: `view:${id}`, filter: viewAsTab(view).filter })
+				}
+			}
+			return entries
+		},
+
+		/**
+		 * Changes whenever the counts have to be fetched again: another set
+		 * of filters, another register or schema, or a list whose total moved
+		 * (a record was added, removed, or left a filter).
+		 *
+		 * @return {string} The signature.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		countRequestKey() {
+			if (this.countEntries.length === 0) {
+				return ''
+			}
+			return JSON.stringify({
+				r: this.register,
+				s: this.exportSchemaSlug,
+				f: this.filter || null,
+				e: this.countEntries,
+				t: Number(this.effectivePagination?.total ?? 0),
+			})
+		},
+
 		/**
 		 * What the tab strip shows: the page's lens tabs when it named any,
 		 * else its quick filters. One strip, never two, so a person is not
@@ -4279,6 +4348,14 @@ export default {
 	},
 
 	watch: {
+		countRequestKey: {
+			immediate: true,
+			/** @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views */
+			handler() {
+				this.loadFilterCounts()
+			},
+		},
+
 		// Remember the whole folder set whenever no folder narrows the query.
 		folderSidebarLiveFacetValues: {
 			immediate: true,
@@ -4488,6 +4565,61 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Whether a saved view shows its record count (`viewCounts`).
+		 *
+		 * @param {string} id The view id.
+		 * @return {boolean} True when the view opted in.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		viewWantsCount(id) {
+			if (this.viewCounts === true) {
+				return true
+			}
+			return Array.isArray(this.viewCounts) && this.viewCounts.map(String).includes(String(id))
+		},
+
+		/**
+		 * Fetch the record counts for the filters and views that asked for
+		 * one. Filters that narrow the same single field share one grouped
+		 * request. A failed count leaves that entry without a number.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		async loadFilterCounts() {
+			const requestKey = this.countRequestKey
+			const schema = this.exportSchemaSlug
+			if (requestKey === '' || !this.register || !schema) {
+				this.tabCounts = null
+				this.savedViewCounts = null
+				return
+			}
+			const params = (this.$route && this.$route.params) || {}
+			const ctx = typeof this.selfFetchTokenCtx === 'function' ? this.selfFetchTokenCtx() : {}
+			const counts = await fetchFilterCounts({
+				register: this.register,
+				schema,
+				entries: this.countEntries.map((entry) => ({ key: entry.key, filter: resolveFilterMap(entry.filter, params, ctx) })),
+				baseFilter: resolveFilterMap(this.filter, params, ctx),
+				ctx,
+			})
+			if (requestKey !== this.countRequestKey) {
+				return
+			}
+			const tabCounts = {}
+			const viewCounts = {}
+			for (const [key, value] of Object.entries(counts)) {
+				if (key.startsWith('tab:')) {
+					tabCounts[Number(key.slice(4))] = value
+				} else {
+					viewCounts[key.slice(5)] = value
+				}
+			}
+			this.tabCounts = tabCounts
+			this.savedViewCounts = viewCounts
+		},
+
 		// ── Split view (case-page-and-list-as-a-place) ──────────────────
 
 		/**

package/src/components/CnNextStepCard/CnNextStepCard.md

@@ -0,0 +1,40 @@
+A step with one thing done and two to go:
+
+```vue
+<CnNextStepCard
+  title="What now? Step 2: handling"
+  :items="[
+    { label: 'Receipt confirmed to the resident', done: true },
+    { label: 'Review the 3 documents that are still open', hint: '2 of 5 done' },
+    { label: 'Draft the decision' },
+  ]"
+  action-label="Continue reviewing"
+  after="Then: step 3, decision" />
+```
+
+A checklist only, with no button:
+
+```vue
+<CnNextStepCard
+  :items="[
+    { label: 'Inform the resident', done: true },
+    { label: 'Archive the case', done: true },
+  ]" />
+```
+
+As a page section, with the button waiting for its request. `title-tag` sets the heading level, `action-id` gives the button an id a skip link can target, and `done-label` and `todo-label` are the states a screen reader hears:
+
+```vue
+<CnNextStepCard
+  title="What now?"
+  title-tag="h2"
+  action-label="Publish"
+  action-id="case-primary-action"
+  :action-disabled="true"
+  done-label="Klaar"
+  todo-label="Nog doen"
+  :items="[
+    { label: 'Check what can be made public', done: true },
+    { label: 'Create the publication' },
+  ]" />
+```