@conduction/nextcloud-vue 2.92.0 → 2.94.0

package/src/components/CnSettingsPage/CnSettingsPage.vue

@@ -47,6 +47,8 @@
 				:title="title"
 				:description="resolvedDescription"
 				:icon="icon"
+				:breadcrumb="breadcrumb"
+				:meta="headerMeta"
 				:visuallyHidden="!showTitle">
 				<!-- Board look: the buildiq square, then the page Save as the
 				     last header button. -->
@@ -475,6 +477,30 @@ export default {
 			default: () => t('nextcloud-vue', 'Settings'),
 		},
 
+		/**
+		 * A breadcrumb under the title (manifest `config.breadcrumb`): one
+		 * crumb `{ label, route?, params?, href?, icon?, separator? }` or a
+		 * list; the title follows as the current crumb. Drawn as the detail
+		 * header's breadcrumb row. Null (the default) draws none.
+		 *
+		 * @type {object|Array<object>|null}
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 */
+		breadcrumb: {
+			type: [Object, Array],
+			default: null,
+		},
+
+		/**
+		 * A note after the breadcrumb and a middle dot (manifest `config.headerMeta`).
+		 *
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 */
+		headerMeta: {
+			type: String,
+			default: '',
+		},
+
 		/** Description shown under the title when `showTitle` is set. */
 		description: {
 			type: String,

package/src/components/CnTabs/CnTabs.vue

@@ -263,6 +263,21 @@ export default defineComponent({
 			default: '',
 		},
 
+		/**
+		 * Leave the `overflow` tabs to the host's `#nav-end` menu instead of a
+		 * "More" menu of the strip's own. The strip then draws only the tabs
+		 * that are not `overflow`, and an overflow tab that is selected joins
+		 * it just before the last of them (board DqZaakBesluiten: Overview,
+		 * Files, Contact, Tasks, Decisions, History). The host lists the
+		 * overflow tabs and selects one through its `CnTab`'s `active`.
+		 *
+		 * @spec openspec/changes/board-tabs-overflow-in-actions/specs/board-tabs-overflow-in-actions/spec.md#requirement-board-tabs-list-their-overflow-in-the-actions-menu
+		 */
+		overflowInNavEnd: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Name of the menu that lists the `overflow` tabs. */
 		moreLabel: {
 			type: String,
@@ -377,14 +392,36 @@ export default defineComponent({
 		 *
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
 		 */
-		const visibleTabs = computed(() => tabs.filter((tab) => boardStrip.value || !tab.overflow || tab.uid === activeUid.value))
+		const visibleTabs = computed(() => {
+			if (props.overflowInNavEnd) {
+				return navEndStrip()
+			}
+			return tabs.filter((tab) => boardStrip.value || !tab.overflow || tab.uid === activeUid.value)
+		})
+
+		/**
+		 * The strip under `overflowInNavEnd`: the tabs that are not
+		 * `overflow`, with a selected overflow tab placed before the last.
+		 *
+		 * @return {object[]} The tabs to draw, in order.
+		 * @spec openspec/changes/board-tabs-overflow-in-actions/specs/board-tabs-overflow-in-actions/spec.md#requirement-an-opened-overflow-tab-joins-the-strip-before-the-last-tab
+		 */
+		function navEndStrip() {
+			const pinned = tabs.filter((tab) => !tab.overflow)
+			const opened = tabs.find((tab) => tab.overflow && tab.uid === activeUid.value)
+			if (!opened) {
+				return pinned
+			}
+			const at = Math.max(0, pinned.length - 1)
+			return [...pinned.slice(0, at), opened, ...pinned.slice(at)]
+		}
 
 		/**
 		 * The tabs listed under "More": overflow tabs that are not selected.
 		 *
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
 		 */
-		const overflowTabs = computed(() => (boardStrip.value ? [] : tabs.filter((tab) => tab.overflow && tab.uid !== activeUid.value)))
+		const overflowTabs = computed(() => (boardStrip.value || props.overflowInNavEnd ? [] : tabs.filter((tab) => tab.overflow && tab.uid !== activeUid.value)))
 
 		/**
 		 * Whether a tab declares a count. `0` is a count; null and '' are not.

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -9,6 +9,7 @@
 			:aria-label="stripLabel"
 			:moreLabel="moreLabel"
 			:variant="stripVariant"
+			:overflowInNavEnd="isBoard"
 			class="cn-tabs-widget__tabs"
 			@update:activeIndex="onTabChange">
 			<!-- One Actions menu for the whole widget, bound to whichever child
@@ -27,10 +28,11 @@
 					{{ cnTranslate(activeHeaderLink.label) }}
 				</component>
 				<CnActionsMenu
-					v-if="showActions"
-					:showRefresh="showRefresh"
-					:showRequestFeature="showRequestFeature"
-					:showDocumentation="showDocumentation"
+					v-if="showActions || menuTabs.length"
+					:showRefresh="showActions && showRefresh"
+					:showRequestFeature="showActions && showRequestFeature"
+					:showDocumentation="showActions && showDocumentation"
+					:showReportBug="showActions"
 					:documentationUrl="documentationUrl"
 					:widgetId="activeWidgetId"
 					:title="activeTitle"
@@ -38,6 +40,20 @@
 					:surface="`widget:${activeWidgetId}`"
 					refreshChannel="cn:widget:refresh"
 					testidBase="cn-tabs-widget">
+					<!-- Board look: the tabs that are not in the strip, at the
+					     top of the menu, in place of a "More" button. -->
+					<template v-if="menuTabs.length" #lead-items>
+						<NcActionButton
+							v-for="entry in menuTabs"
+							:key="entry.key"
+							:disabled="entry.pending || null"
+							:closeAfterClick="true"
+							data-testid="cn-tabs-widget-menu-tab"
+							@click="openMenuTab(entry)">
+							{{ menuTabLabel(entry) }}
+						</NcActionButton>
+						<NcActionSeparator v-if="showActions" />
+					</template>
 					<!-- The open panel's own items, below the built-in trio.
 					     A panel draws no header, so these would otherwise have
 					     nowhere to go: the data widget's Metadata and full edit
@@ -51,7 +67,7 @@
 					     tab mounted, so several panels publish at once and an
 					     unfiltered list would offer actions for a sheet nobody
 					     is looking at. -->
-					<template v-if="activePanelActions.length" #action-items>
+					<template v-if="showActions && activePanelActions.length" #action-items>
 						<NcActionButton
 							v-for="action in activePanelActions"
 							:key="action.key"
@@ -175,7 +191,7 @@
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
-import { NcActionButton, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcActionSeparator, NcLoadingIcon } from '@nextcloud/vue'
 import CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'
 import CnEmptyContent from '../CnEmptyContent/CnEmptyContent.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
@@ -184,6 +200,7 @@ import CnTabs from '../CnTabs/CnTabs.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { headerLinkTarget, widgetHeaderLink } from '../../utils/contentHeaderLink.js'
 import { resolveTabCount } from '../../utils/detailActionModel.js'
+import { detailWidgetVisible } from '../../utils/detailWidgetVisibility.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { isActivityWidget } from '../../utils/headerMeta.js'
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js'
@@ -251,6 +268,7 @@ export default {
 		CnTab,
 		CnTabs,
 		NcActionButton,
+		NcActionSeparator,
 		CnEmptyContent,
 		NcLoadingIcon,
 	},
@@ -364,7 +382,8 @@ export default {
 		 * `layout: [{ widgetId, gridWidth }]` sets a width (of 12) per widget, as
 		 * the page grid does. Widgets wrap onto the next row.
 		 *
-		 * `maxVisibleTabs` caps the strip: later tabs go under "More".
+		 * `maxVisibleTabs` caps the strip: later tabs go under "More" (in the
+		 * board look: into the Actions menu, with History kept in the strip).
 		 * `hideEmpty: true` moves a tab whose count is 0 there too.
 		 * `moreLabel` names that menu. `variant: "segmented"` draws the strip
 		 * as a pill switch (CnTabs' segmented variant); `line` is the default.
@@ -552,16 +571,34 @@ export default {
 			return [...(forId.host || []), ...(forId.widget || [])]
 		},
 
+		/**
+		 * The tabs the board look lists at the top of the Actions menu: the
+		 * overflow tabs, less the one that is open (it is in the strip).
+		 * Empty outside the board look, where CnTabs draws "More".
+		 *
+		 * @return {object[]} Resolved tabs, in strip order.
+		 * @spec openspec/changes/board-tabs-overflow-in-actions/specs/board-tabs-overflow-in-actions/spec.md#requirement-board-tabs-list-their-overflow-in-the-actions-menu
+		 */
+		menuTabs() {
+			if (!this.isBoard) {
+				return []
+			}
+			return this.resolvedTabs.filter((entry, index) => entry.overflow && index !== this.activeIndex)
+		},
+
 		/**
 		 * The configured tabs, each paired with the widget definition it names.
 		 *
 		 * A tab goes under the strip's "More" menu when it says `overflow`, when
 		 * `content.hideEmpty` is set and its count is 0, or when
 		 * `content.maxVisibleTabs` places are already taken. `count` is a
-		 * literal, or read off the record through `countField`.
+		 * literal, or read off the record through `countField`. In the board
+		 * look those tabs are listed in the Actions menu instead, and the
+		 * activity (History) tab always stays in the strip.
 		 *
 		 * @return {object[]} `{ key, widgetId, label, icon, widget, count, overflow }` per tab.
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
+		 * @spec openspec/changes/board-tabs-overflow-in-actions/specs/board-tabs-overflow-in-actions/spec.md#requirement-board-tabs-list-their-overflow-in-the-actions-menu
 		 */
 		resolvedTabs() {
 			const authored = Array.isArray(this.content?.tabs) ? this.content.tabs : []
@@ -580,9 +617,12 @@ export default {
 			const originalIndex = ordered.map(({ index }) => index)
 			const max = Number(this.content?.maxVisibleTabs)
 			const hideEmpty = this.content?.hideEmpty === true
+			// The board keeps its History tab in the strip, so it holds one of
+			// the `maxVisibleTabs` places from the start.
+			const pinActivity = this.isBoard && tabs.some((tab, position) => isActivityTab(tab) && this.tabVisibility(tab, originalIndex[position]) !== 'hidden')
 			// How many tabs have taken a place in the strip so far. A tab that
 			// is already going under "More" does not use one up.
-			let placed = 0
+			let placed = pinActivity ? 1 : 0
 			const resolved = []
 			tabs.forEach((tab, position) => {
 				const index = originalIndex[position]
@@ -596,7 +636,7 @@ export default {
 				const ids = this.tabWidgetIds(tab)
 				const widgets = ids.length > 1
 					? ids.map((id) => this.availableWidgets.find((w) => w && w.id === id) || null)
-							.filter((w) => w && !this.hiddenByWorkspace(w))
+							.filter((w) => w && !this.hiddenByWorkspace(w) && !this.hiddenByRecord(w))
 					: []
 				const widget = ids.length > 1
 					? (widgets[0] || null)
@@ -605,9 +645,9 @@ export default {
 				const declared = resolveTabCount(typeof tab === 'object' ? tab : null, this.objectData)
 				const counted = this.widgetCounts[index]
 				const count = declared === null && typeof counted === 'number' ? counted : declared
-				// The board strip has no "More": every tab is in the strip.
-				let overflow = !this.isBoard && ((tab && tab.overflow === true) || (hideEmpty && count === 0))
-				if (!overflow && !this.isBoard) {
+				const pinned = pinActivity && isActivityTab(tab)
+				let overflow = !pinned && ((tab && tab.overflow === true) || (hideEmpty && count === 0))
+				if (!overflow && !pinned) {
 					if (Number.isFinite(max) && max > 0 && placed >= max) {
 						overflow = true
 					} else {
@@ -868,6 +908,26 @@ export default {
 			return !evaluateWorkspaceCondition(cond, 'value' in bag ? bag.value : bag)
 		},
 
+		/**
+		 * Whether the record hides a widget of a stack on a detail page: its
+		 * own `visibleWhen` reads a field of the record or of a record the
+		 * page's `visibilityContext` names (`@context.<name>`), and does not
+		 * hold, as a grid widget's would not. Hidden while those records
+		 * load. Off a detail page (no record), and for a condition that needs
+		 * a request, nothing is hidden here.
+		 *
+		 * @param {object} widget The widget definition.
+		 * @return {boolean} True when the widget must not draw.
+		 * @spec openspec/changes/tab-stack-child-visible-when/specs/tab-stack-child-visible-when/spec.md#requirement-a-widget-in-a-tab-stack-on-a-detail-page-follows-its-own-condition
+		 */
+		hiddenByRecord(widget) {
+			const cond = widget.visibleWhen
+			if (!this.objectData || !cond || typeof cond !== 'object' || isWorkspaceCondition(cond) || !isLocallyDecidableVisibleWhen(cond)) {
+				return false
+			}
+			return !detailWidgetVisible(widget, this.conditionData)
+		},
+
 		/**
 		 * The grid a stack lays its widgets out in, as one column span (of 12)
 		 * per widget in order, or null for the plain vertical stack. A tab says
@@ -1139,6 +1199,39 @@ export default {
 			}
 		},
 
+		/**
+		 * Open a tab picked from the Actions menu, then move focus to it in
+		 * the strip, so a keyboard user lands on the tab they chose.
+		 *
+		 * @param {object} entry The resolved tab.
+		 * @return {void}
+		 * @spec openspec/changes/board-tabs-overflow-in-actions/specs/board-tabs-overflow-in-actions/spec.md#requirement-board-tabs-list-their-overflow-in-the-actions-menu
+		 */
+		openMenuTab(entry) {
+			const index = this.resolvedTabs.indexOf(entry)
+			if (index < 0) {
+				return
+			}
+			this.activeIndex = index
+			this.$nextTick(() => {
+				const button = this.$el?.querySelector?.('[role="tab"][aria-selected="true"]')
+				if (button && typeof button.focus === 'function') {
+					button.focus()
+				}
+			})
+		},
+
+		/**
+		 * A menu tab's text: its label, and its count when it has one.
+		 *
+		 * @param {object} entry The resolved tab.
+		 * @return {string} The menu label.
+		 */
+		menuTabLabel(entry) {
+			const hasCount = entry.count !== null && entry.count !== undefined && entry.count !== ''
+			return hasCount ? `${entry.label} (${entry.count})` : entry.label
+		},
+
 		/**
 		 * Empty-state text for a tab whose widget id resolves to nothing.
 		 *

package/src/components/CnUserSettingsDialog/CnUserSettingsDialog.vue

@@ -0,0 +1,305 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<CnDialog
+		class="cn-user-settings-dialog"
+		:name="title"
+		look="board"
+		width="wizard"
+		:eyebrow="eyebrow"
+		:subtitle="subtitle"
+		:open="open"
+		:style="eyebrowStyle"
+		data-testid="cn-user-settings-dialog"
+		@update:open="onUpdateOpen"
+		@closing="close">
+		<div class="cn-user-settings-dialog__body">
+			<nav
+				v-if="sections.length > 0"
+				class="cn-user-settings-dialog__nav"
+				:aria-label="navLabel"
+				data-testid="cn-user-settings-nav">
+				<ul>
+					<li v-for="section in sections" :key="section.id">
+						<a
+							:href="`#settings-section_${section.id}`"
+							class="cn-user-settings-dialog__nav-link"
+							:class="{ 'cn-user-settings-dialog__nav-link--active': section.id === selected }"
+							:aria-current="section.id === selected ? 'true' : undefined"
+							:data-testid="`cn-user-settings-nav-${section.id}`"
+							@click.prevent="selectSection(section.id)">
+							<span v-if="section.icon" class="cn-user-settings-dialog__nav-icon" aria-hidden="true">
+								<CnVNodes :vnodes="section.icon" />
+							</span>
+							<span>{{ section.name }}</span>
+						</a>
+					</li>
+				</ul>
+			</nav>
+			<div class="cn-user-settings-dialog__sections">
+				<!-- @slot default NcAppSettingsSection children; each registers itself in the navigation. -->
+				<slot />
+			</div>
+		</div>
+		<template #actions>
+			<p class="cn-user-settings-dialog__note" data-testid="cn-user-settings-note">
+				{{ footerNote }}
+			</p>
+			<NcButton variant="secondary" data-testid="cn-user-settings-close" @click="close">
+				{{ closeLabel }}
+			</NcButton>
+		</template>
+	</CnDialog>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcButton } from '@nextcloud/vue'
+import { markRaw } from 'vue'
+import CnDialog from '../CnDialog/CnDialog.vue'
+
+/**
+ * The key NcAppSettingsSection injects to register itself with its dialog
+ * (`Symbol.for`, so the same symbol `@nextcloud/vue` provides).
+ */
+const REGISTRATION_KEY = Symbol.for('NcAppSettingsDialog:registration')
+
+/** Renders a section's icon vnodes as they were registered. */
+const CnVNodes = {
+	name: 'CnVNodes',
+	props: { vnodes: { type: [Array, Object], default: null } },
+	render() {
+		return this.vnodes
+	},
+}
+
+/**
+ * CnUserSettingsDialog - the user settings dialog in the board look (board
+ * PqPersoonlijk): eyebrow, title and subtitle, a left navigation listing the
+ * sections with their icons, the sections themselves, and a footer with a
+ * note that changes save straight away and a Close button.
+ *
+ * The sections stay the app's: any `NcAppSettingsSection` in the default slot
+ * registers itself with this dialog exactly as it does with
+ * `NcAppSettingsDialog`, with its name, order and `#icon` slot. CnAppRoot
+ * renders this dialog instead of `NcAppSettingsDialog` under the board look.
+ *
+ * @spec openspec/changes/user-settings-board-dialog/specs/user-settings-board-dialog/spec.md#requirement-the-user-settings-dialog-takes-the-board-look
+ *
+ * @event update:open Emitted with `false` when the dialog closes.
+ */
+export default {
+	name: 'CnUserSettingsDialog',
+
+	components: { CnDialog, CnVNodes, NcButton },
+
+	provide() {
+		return {
+			[REGISTRATION_KEY]: {
+				registerSection: this.registerSection,
+				unregisterSection: this.unregisterSection,
+			},
+		}
+	},
+
+	props: {
+		/** Whether the dialog is open. */
+		open: { type: Boolean, default: false },
+		/** Dialog title; also its accessible name. */
+		title: { type: String, required: true },
+		/** Context line above the title. */
+		eyebrow: { type: String, default: () => t('nextcloud-vue', 'Your account') },
+		/** Sentence under the title. */
+		subtitle: { type: String, default: () => t('nextcloud-vue', 'Only for you. Colleagues keep their own settings.') },
+		/** The app's name, after the footer note. */
+		appName: { type: String, default: '' },
+	},
+
+	emits: ['update:open'],
+
+	data() {
+		return {
+			sections: [],
+			selected: '',
+			picked: false,
+		}
+	},
+
+	computed: {
+		/** @return {object} The board's eyebrow: muted, in sentence case. */
+		eyebrowStyle() {
+			return { '--cn-dialog-eyebrow-transform': 'none', '--cn-dialog-eyebrow-color': 'var(--color-text-maxcontrast)' }
+		},
+
+		/** @return {string} The navigation's accessible name. */
+		navLabel() {
+			return t('nextcloud-vue', 'Sections of the settings')
+		},
+
+		/** @return {string} The footer note, with the app's name when known. */
+		footerNote() {
+			const note = t('nextcloud-vue', 'Changes are saved straight away')
+			return this.appName ? `${note} · ${this.appName}` : note
+		},
+
+		/** @return {string} The Close button label. */
+		closeLabel() {
+			return t('nextcloud-vue', 'Close')
+		},
+	},
+
+	methods: {
+		/**
+		 * Add a section to the navigation, kept in `order`; a section
+		 * without one goes last. Until the reader picks one, the first
+		 * section is current.
+		 *
+		 * @param {string} id The section id.
+		 * @param {string} name The section name.
+		 * @param {number} [order] The section's place.
+		 * @param {Array} [icon] The section's icon vnodes.
+		 */
+		registerSection(id, name, order, icon) {
+			const rest = this.sections.filter((section) => section.id !== id)
+			const place = typeof order === 'number' ? order : Math.max(0, ...rest.map((section) => section.order)) + 1
+			this.sections = [...rest, { id, name, order: place, icon: icon ? markRaw(icon) : null }].sort((a, b) => a.order - b.order)
+			if (!this.picked) {
+				this.selected = this.sections[0].id
+			}
+		},
+
+		/**
+		 * Remove a section from the navigation.
+		 *
+		 * @param {string} id The section id.
+		 */
+		unregisterSection(id) {
+			this.sections = this.sections.filter((section) => section.id !== id)
+			if (this.selected === id) {
+				this.selected = this.sections.length > 0 ? this.sections[0].id : ''
+			}
+		},
+
+		/**
+		 * Mark a section current and scroll it into view.
+		 *
+		 * @param {string} id The section id.
+		 */
+		selectSection(id) {
+			this.picked = true
+			this.selected = id
+			const target = typeof document !== 'undefined' ? document.getElementById(`settings-section_${id}`) : null
+			if (target && typeof target.scrollIntoView === 'function') {
+				target.scrollIntoView({ behavior: 'smooth', block: 'start' })
+			}
+		},
+
+		/**
+		 * Follow NcDialog's own open state.
+		 *
+		 * @param {boolean} value Whether NcDialog is open.
+		 */
+		onUpdateOpen(value) {
+			if (!value) {
+				this.close()
+			}
+		},
+
+		/** Close the dialog. */
+		close() {
+			/**
+			 * @event update:open Emitted with `false` when the dialog closes (Close button, close icon, Escape).
+			 */
+			this.$emit('update:open', false)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-user-settings-dialog__body {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0 24px;
+}
+
+.cn-user-settings-dialog__nav {
+	flex: 0 0 200px;
+	width: 200px;
+	padding-top: 18px;
+}
+
+.cn-user-settings-dialog__nav ul {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-user-settings-dialog__nav-link {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-height: 40px;
+	padding: 0 12px;
+	border-radius: var(--border-radius-element, 8px);
+	font-size: 15px;
+	color: var(--color-main-text);
+	text-decoration: none;
+}
+
+.cn-user-settings-dialog__nav-link:hover {
+	background: var(--color-background-hover);
+}
+
+.cn-user-settings-dialog__nav-link:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+
+.cn-user-settings-dialog__nav-link--active,
+.cn-user-settings-dialog__nav-link--active:hover {
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-weight: 600;
+}
+
+.cn-user-settings-dialog__nav-icon {
+	display: inline-flex;
+	flex: none;
+	width: 18px;
+	height: 18px;
+	align-items: center;
+	justify-content: center;
+}
+
+.cn-user-settings-dialog__sections {
+	display: flex;
+	flex: 1 1 380px;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.cn-user-settings-dialog__sections :deep(.app-settings-section) {
+	margin: 0;
+	padding: 18px 0;
+	border-top: 1px solid var(--color-border);
+}
+
+.cn-user-settings-dialog__sections :deep(.app-settings-section__name) {
+	margin: 0 0 12px;
+	font-size: 17px;
+	font-weight: 700;
+}
+
+.cn-user-settings-dialog__note {
+	flex: 1 1 auto;
+	margin: 0;
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+</style>

package/src/components/CnVersionInfoCard/CnVersionInfoCard.vue

@@ -45,10 +45,11 @@
 						<span class="cn-version-info__value">{{ appVersion }}</span>
 					</div>
 
-					<!-- Configured Version (if provided) -->
-					<div v-if="configuredVersion" class="cn-version-info__item">
+					<!-- Configured version: when provided, and always in the board look,
+					     which draws the row ("Unknown" until the app reports it). -->
+					<div v-if="configuredVersion || isBoard" class="cn-version-info__item" data-testid="cn-version-info-configured">
 						<span class="cn-version-info__label">{{ fieldLabels.configuredVersion }}:</span>
-						<span class="cn-version-info__value">{{ configuredVersion }}</span>
+						<span class="cn-version-info__value">{{ configuredVersion || t('nextcloud-vue', 'Unknown') }}</span>
 					</div>
 
 					<!-- Additional items -->

package/src/components/CnWidgetWrapper/CnWidgetWrapper.md

@@ -177,3 +177,11 @@ Request a feature / Report a bug / Documentation render on every widget; the sha
 ### A text link in the header (`headerLink`)
 
 `headerLink` (`{ label, route?, params?, query?, href? }`) draws one text link in the header before the overflow menu, such as "All deadlines".
+
+Subtitle: `subtitle` is a muted line under the title, the counterpart of `eyebrow` above it:
+
+```vue
+<CnWidgetWrapper title="Op tijd beslist per zaaktype" subtitle="Dit kwartaal, beslist binnen de termijn">
+  <p>…</p>
+</CnWidgetWrapper>
+```