@conduction/nextcloud-vue 2.68.0 → 2.70.0

package/src/components/CnDashboardGrid/CnDashboardGrid.vue

@@ -31,6 +31,7 @@
 				v-for="(item, index) in layout"
 				:key="resolveItemKey(item)"
 				class="grid-stack-item"
+				:class="{ 'cn-dashboard-grid__item--fit': sizeToContentAttr(item) !== undefined }"
 				role="group"
 				:aria-label="resolveItemLabel(item, index)"
 				:aria-describedby="itemDescribedBy"
@@ -255,6 +256,19 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+
+		/**
+		 * GridStack's `float`. True (the default) keeps every item on the row
+		 * it was placed on, with empty rows above it if need be. False packs
+		 * items upward, so a size-to-content cell that shrinks, or a widget
+		 * that is not shown, closes its gap instead of leaving a band.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-dashboard-closes-the-gap-a-shrinking-or-hidden-widget-leaves
+		 */
+		float: {
+			type: Boolean,
+			default: true,
+		},
 	},
 
 	emits: [
@@ -278,6 +292,8 @@ export default {
 		return {
 			grid: null,
 			contentObserver: null,
+			/** True while the grid moves an item to where the layout put it. */
+			applyingLayout: false,
 			domId: `cn-dashboard-grid-${++domIdCounter}`,
 			/** Text currently held in the polite live region. */
 			announcement: '',
@@ -485,7 +501,7 @@ export default {
 				column: this.columns,
 				cellHeight: this.cellHeight,
 				margin: this.margin,
-				float: true,
+				float: this.float,
 				animate: true,
 				disableDrag: !this.editable,
 				disableResize: !this.editable,
@@ -558,6 +574,10 @@ export default {
 			// switched off as the grid narrows, and back on as it widens.
 			this.syncInteractivity()
 
+			if (this.applyingLayout) {
+				return
+			}
+
 			// GridStack fires `change` for its own responsive rescale too, and at a
 			// 12 → 1 breakpoint every item reads `gridX: 0, gridWidth: 1`. Emitting
 			// that has the host persist the reflow AS the authored layout, which
@@ -957,7 +977,29 @@ export default {
 					const node = this.grid.engine.nodes.find((n) => String(n.id) === String(item.id))
 					if (!node) {
 						this.grid.makeWidget(el)
-					} else if (node.el !== el) {
+					} else if (node.el === el) {
+						// The layout MOVED an item the grid already tracks: the
+						// page re-compacts its display layout when a widget's
+						// condition hides it, and the item below was given a new
+						// gridY that never reached GridStack, so a band stayed
+						// where the hidden widget had been. A drag reports the
+						// grid's own position back, which matches and does
+						// nothing here.
+						const x = item.gridX ?? node.x
+						const y = item.gridY ?? node.y
+						if (x !== node.x || y !== node.y) {
+							// The layout said where it goes; GridStack's `change`
+							// for it is not a user's arrangement and is not
+							// reported back (it would write the display-only
+							// compaction into the authored layout).
+							this.applyingLayout = true
+							try {
+								this.grid.update(el, { x, y })
+							} finally {
+								this.applyingLayout = false
+							}
+						}
+					} else {
 						// Drop the stale node without touching its detached DOM,
 						// then adopt the new element so GridStack sizes/places it.
 						this.grid.removeWidget(node.el, false, false)
@@ -1016,6 +1058,16 @@ export default {
 	border-radius: var(--border-radius-container-large, 16px);
 }
 
+/* A size-to-content cell (`sizeToContent`) is measured by GridStack from the
+   content's first child, and a widget wrapper there filled the cell
+   (`height: 100%`), so the measure returned the cell's own height and the
+   cell never shrank: "Waiting for me" stayed a tall card around one row. In
+   such a cell the child takes its own height. A cell without the key keeps
+   the filling child. */
+.cn-dashboard-grid__item--fit > :deep(.grid-stack-item-content > *) {
+	height: auto;
+}
+
 :deep(.grid-stack-item-content) {
 	background: var(--color-main-background);
 	border: none;

package/src/components/CnDashboardPage/CnDashboardPage.md

@@ -153,6 +153,8 @@ Three behaviours are worth knowing because each is load-bearing:
 
 Call `resetUserLayout()` to drop the arrangement; the page emits `user-layout-reset` and returns to the manifest.
 
+The same `userLayout` covers the page's [views](../../../docs/components/cn-dashboard-page.md#each-view-arranged-per-user-userlayout): each view's grid is draggable in edit mode and is stored per view, under the page id with `.view.<view id>` appended. Edit mode shows **Reset layout**, which returns the page's own grid and the chosen view to the manifest (`user-layout-reset`, `view-layout-reset`). `resetViewUserLayout(viewId)` resets one view.
+
 ## Slots
 
 | Slot | Scope | Description |

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -67,6 +67,19 @@
 					</template>
 					{{ isEditing ? doneLabel : editLabel }}
 				</NcButton>
+				<!-- With `userLayout`, edit mode offers a way back to the
+				     manifest: the page's own grid and the chosen view return
+				     to the layout the app ships. Other views keep theirs. -->
+				<NcButton
+					v-if="userLayout && isEditing"
+					variant="tertiary"
+					data-testid="cn-dashboard-page-reset-layout"
+					@click="resetLayout">
+					<template #icon>
+						<Restore :size="20" />
+					</template>
+					{{ t('nextcloud-vue', 'Reset layout') }}
+				</NcButton>
 				<!-- In-app edit button (ADR-041). Renders only when Buildiq is
 				     reachable; self-wires from the cnManifestEditor / cnOpenBuildAvailable
 				     provided by CnAppRoot. Sits inline with the page's action buttons. -->
@@ -292,6 +305,7 @@
 			:columns="columns"
 			:cellHeight="cellHeight"
 			:margin="gridMargin"
+			:float="gridFloat"
 			@layoutChange="section.view ? onViewLayoutChange($event) : onLayoutChange($event)">
 			<template #widget="{ item }">
 				<!-- In-app edit overlay (ADR-041): a single launchpad-style
@@ -754,6 +768,7 @@ import Check from 'vue-material-design-icons/Check.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import Download from 'vue-material-design-icons/Download.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
+import Restore from 'vue-material-design-icons/Restore.vue'
 import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
 import CnWidgetStyleEditorModal from '../../dialogs/CnWidgetStyleEditorModal.vue'
 import CnBodySections from '../CnBodySections/CnBodySections.vue'
@@ -768,9 +783,8 @@ import CnWidgetRefItem from '../CnWidgetRefItem/CnWidgetRefItem.vue'
 import CnWidgetRenderer from '../CnWidgetRenderer/CnWidgetRenderer.vue'
 import CnWidgetWrapper from '../CnWidgetWrapper/CnWidgetWrapper.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
-import { readUserPreference, writeUserPreference } from '../../composables/useUserPreferences.js'
 import { pageViews } from '../../mixins/pageViews.js'
-import { dashboardLayoutKey, mergeUserLayout } from '../../store/plugins/dashboardLayouts.js'
+import { mergeUserLayout, resolveUserLayoutApi } from '../../store/plugins/dashboardLayouts.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { compareVisibleWhen, readVisibleWhenValue } from '../../utils/visibleWhen.js'
 import { canonicalWidgetType } from '../../utils/widgetTypeAliases.js'
@@ -905,6 +919,7 @@ export default {
 		NcLoadingIcon,
 		NcSelect,
 		Pencil,
+		Restore,
 		Check,
 		Cog,
 		CalendarRange,
@@ -1016,6 +1031,19 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * GridStack's `float` for this dashboard (manifest
+		 * `config.gridFloat`). True (the default) keeps every widget on its
+		 * row. False packs widgets upward, so a size-to-content widget that
+		 * shrinks closes the gap under it instead of leaving an empty band.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-dashboard-closes-the-gap-a-shrinking-or-hidden-widget-leaves
+		 */
+		gridFloat: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Widget definitions array. Each widget defines metadata for rendering.
 		 *
@@ -1958,7 +1986,7 @@ export default {
 		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
 		 */
 		viewDisplayLayout() {
-			const items = this.activeView ? this.activeView.layout : []
+			const items = this.activeViewLayout
 			if (this.gridEditable) {
 				return items
 			}
@@ -2000,8 +2028,9 @@ export default {
 					key: `view-${this.activeViewId}`,
 					view: true,
 					layout: this.viewDisplayLayout,
-					// A user arrangement covers the page's own layout only.
-					editable: this.gridEditable && !this.userLayout,
+					// With `userLayout` the user arranges the view too; the
+					// arrangement is kept per view (pageViews mixin).
+					editable: this.gridEditable,
 					attrs: {
 						id: this.viewRegionId,
 						role: 'region',
@@ -2721,6 +2750,7 @@ export default {
 			// the user's arrangement is finished when they say it is.
 			if (leaving) {
 				this.saveUserLayout()
+				this.saveViewUserLayouts()
 			}
 
 			/**
@@ -2780,6 +2810,17 @@ export default {
 			}
 		},
 
+		/**
+		 * The edit-mode reset: the page's own grid and the chosen view return
+		 * to the manifest layout. Other views keep this user's arrangement.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/page-view-user-layouts/specs/view-switch-containers/spec.md#requirement-resetting-a-view-restores-its-manifest-layout
+		 */
+		async resetLayout() {
+			await Promise.all([this.resetUserLayout(), this.resetViewUserLayout()])
+		},
+
 		/**
 		 * Drop this user's arrangement and return to the manifest.
 		 *
@@ -2832,35 +2873,7 @@ export default {
 		 * @return {{ load: (appId: string, pageId: string) => Promise<object|null>, save: (appId: string, pageId: string, layout: Array<object>) => Promise<boolean>, reset: (appId: string, pageId: string) => Promise<boolean> }} The api.
 		 */
 		userLayoutApi() {
-			const store = this.userLayoutStore
-			if (store && typeof store.loadDashboardLayout === 'function') {
-				return {
-					load: (...a) => store.loadDashboardLayout(...a),
-					save: (...a) => store.saveDashboardLayout(...a),
-					reset: (...a) => store.resetDashboardLayout(...a),
-				}
-			}
-
-			return {
-				load: (appId, pageId) => readUserPreference(appId, dashboardLayoutKey(pageId), null),
-				save: (appId, pageId, layout) => writeUserPreference(
-					appId,
-					dashboardLayoutKey(pageId),
-					{ items: (layout || []).map((i) => ({
-						widgetId: i.widgetId,
-						gridX: i.gridX,
-						gridY: i.gridY,
-						gridWidth: i.gridWidth,
-						gridHeight: i.gridHeight,
-					})) },
-				),
-
-				reset: (appId, pageId) => writeUserPreference(
-					appId,
-					dashboardLayoutKey(pageId),
-					{ items: [] },
-				),
-			}
+			return resolveUserLayoutApi(this.userLayoutStore)
 		},
 
 		onLayoutChange(updated) {
@@ -3603,6 +3616,12 @@ export default {
 
 		getWidgetButtons(item) {
 			const def = this.getWidgetDef(item.widgetId)
+			// `showButtons: false` on the placement or the definition drops
+			// the footer links ("More events"), for a placement whose card
+			// says enough without them (zuiddrecht-pixel-gaps-3).
+			if (item?.showButtons === false || def?.showButtons === false) {
+				return []
+			}
 			return def?.buttons || []
 		},
 
@@ -3906,11 +3925,16 @@ export default {
 			// library's own defaults, so a manifest need not set them — but a
 			// manifest that DOES set them must reach the component, or the
 			// declaration is a silent no-op that reads like configuration.
-			for (const key of ['countLabel', 'variant', 'showZeroCount', 'horizontal', 'vertical', 'filled', 'route', 'iconClass']) {
+			for (const key of ['countLabel', 'variant', 'showZeroCount', 'horizontal', 'vertical', 'filled', 'route', 'iconClass', 'format', 'layout']) {
 				if (props[key] !== undefined) {
 					out[key] = props[key]
 				}
 			}
+			// `content.layout: "stacked"`, the key a stat tile takes, works on
+			// a stats block too (zuiddrecht-pixel-gaps-3).
+			if (out.layout === undefined && typeof content.layout === 'string') {
+				out.layout = content.layout
+			}
 			// `countLabel` is the unit beside the number ("0 cases", "0 tasks").
 			// It is manifest-authored prose and was being forwarded raw, so a
 			// Dutch account read "0 cases" beside a translated widget title.

package/src/components/CnDataTable/CnDataTable.vue

@@ -361,6 +361,40 @@ import { CnLockIndicator } from '../CnLockIndicator/index.js'
 // consuming app does not pull in the library's global css/index.css.
 import '../../css/table.css'
 
+/**
+ * Fill a `secondary` template such as `"{identifier} · {requester}"`.
+ *
+ * A field without a value takes its separator with it: the text between two
+ * fields belongs to the field after it, so an empty requester leaves
+ * "2026-0002", not "2026-0002 ·", and an empty first field does not leave a
+ * leading separator either. Text before the first field and after the last
+ * one is kept as written. A template whose fields all have values fills
+ * exactly as before.
+ *
+ * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-empty-field-takes-its-separator-with-it
+ * @param {string} template The template, with `{field}` placeholders.
+ * @param {(key: string) => string} valueOf The text of a field ('' when empty).
+ * @return {string} The filled template.
+ */
+function fillSecondaryTemplate(template, valueOf) {
+	// split() with a capture group alternates literal, field, literal, …
+	const parts = template.split(/\{([^}]+)\}/)
+	const lead = parts[0]
+	const tail = parts[parts.length - 1]
+	let body = ''
+	for (let i = 1; i < parts.length; i += 2) {
+		const value = valueOf(parts[i].trim())
+		if (value === '') {
+			continue
+		}
+		// The literal before this field: the separator, unless nothing has
+		// been written yet (then there is nothing to separate from).
+		const separator = i === 1 ? '' : parts[i - 1]
+		body += (body === '' ? '' : separator) + value
+	}
+	return lead + body + tail
+}
+
 /**
  * CnDataTable — Generic sortable data table for list views.
  *
@@ -1451,7 +1485,7 @@ export default {
 			}
 			const asText = (v) => (v === null || v === undefined ? '' : String(v))
 			if (spec.includes('{')) {
-				const filled = spec.replace(/\{([^}]+)\}/g, (_, key) => asText(this.getCellValue(row, key.trim())))
+				const filled = fillSecondaryTemplate(spec, (key) => asText(this.getCellValue(row, key)))
 				// A template whose every field is empty leaves only separators:
 				// nothing worth a line.
 				return /[\p{L}\p{N}]/u.test(filled) ? filled.trim() : ''

package/src/components/CnDetailPage/CnDetailPage.md

@@ -211,6 +211,12 @@ export default {
 | `excludeFields` (`exclude-fields`) | Array | `[]` | Fields the create and edit forms never ask for. Applied after `includeFields`. |
 | `fieldOverrides` (`field-overrides`) | Object | `{}` | Per-field widget / label overrides for the create and edit forms, keyed by field name. Forwarded to `CnFormDialog`. |
 
+## Each view arranged per user
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `userLayout` | Boolean | `false` | Let the user arrange each of the page's `views` for themselves. The header shows **Arrange view** next to the view switch; **Done** stores the arrangement per view and user (a user preference, mirrored in the browser), **Reset view** returns the chosen view to its manifest layout. The manifest `layout` is never changed. See [the guide](../../../docs/components/cn-detail-page.md#each-view-arranged-per-user-userlayout). |
+
 ## Slots
 
 | Slot | Description |
@@ -438,3 +444,5 @@ When the schema-driven fetch answers 404 the page shows a not-found state whose
 ### Header card and header widget
 
 `headerCard` (default `false`) draws the header as a bordered card. `headerWidget` (default `''`) names a widget in `widgets` to render inside the header under the title, without a card of its own and out of the body grid: the stages bars of the board's case card.
+
+`showWidgetActions` (Boolean, default `true`): `false` (manifest `config.showWidgetActions: false`) drops the overflow Actions menu from the cards of the body grid and the side column, unless a widget definition sets `showActions: true`.

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -48,6 +48,7 @@
 			class="cn-detail-page__breadcrumbs"
 			:crumbs="breadcrumbCrumbs"
 			:rootText="breadcrumbCrumbs[0].icon === undefined"
+			:separator="breadcrumbSeparator"
 			data-testid="cn-detail-page-breadcrumbs" />
 		<!-- Header -->
 		<div
@@ -157,6 +158,31 @@
 					:controls="viewRegionId"
 					data-testid="cn-detail-page-view-switch"
 					@update:modelValue="selectView" />
+				<!-- With `userLayout`, the user arranges the chosen view for
+				     themselves: Arrange view makes its grid draggable, Done
+				     stores the arrangement, Reset view returns the view to the
+				     layout the app ships. -->
+				<NcButton
+					v-if="userLayout && viewUserLayoutOn && !viewIsEmpty"
+					:variant="arrangingView ? 'primary' : 'secondary'"
+					data-testid="cn-detail-page-arrange-view"
+					@click="toggleArrangeView">
+					<template #icon>
+						<Check v-if="arrangingView" :size="20" />
+						<Pencil v-else :size="20" />
+					</template>
+					{{ arrangingView ? t('nextcloud-vue', 'Done') : t('nextcloud-vue', 'Arrange view') }}
+				</NcButton>
+				<NcButton
+					v-if="viewUserLayoutOn && arrangingView"
+					variant="tertiary"
+					data-testid="cn-detail-page-reset-view"
+					@click="resetViewUserLayout()">
+					<template #icon>
+						<Restore :size="20" />
+					</template>
+					{{ t('nextcloud-vue', 'Reset view') }}
+				</NcButton>
 				<!-- Next and previous inside the list this record was opened
 				     from. Rendered only when the address names that list: a
 				     record reached by a bare link offers neither, rather than
@@ -626,10 +652,10 @@
 			     keyed on its view, so switching mounts the other view's grid. -->
 			<CnDashboardGrid
 				v-for="section in bodyGridSections"
-				:key="`cn-detail-grid-${section.key}-${editingBody ? 'editing' : 'live'}`"
+				:key="`cn-detail-grid-${section.key}-${section.editable ? 'editing' : 'live'}`"
 				v-bind="section.attrs"
 				:layout="section.layout"
-				:editable="editingBody"
+				:editable="section.editable"
 				:columns="12"
 				:columnOpts="columnOpts"
 				class="cn-detail-page__grid"
@@ -724,6 +750,7 @@
 								:widget="findWidget(item)"
 								chrome="card"
 								:showCardTitle="showCardTitle(item)"
+								:showActions="showWidgetActions"
 								:objectId="objectId"
 								:object="currentObject"
 								:objectType="resolvedObjectType"
@@ -934,6 +961,7 @@
 						:widget="widget"
 						chrome="card"
 						:showCardTitle="true"
+						:showActions="showWidgetActions"
 						:objectId="objectId"
 						:object="currentObject"
 						:objectType="resolvedObjectType"
@@ -1060,6 +1088,7 @@ import { NcActionButton, NcActionCaption, NcActionLink, NcActionSeparator, NcBut
 import { provide, ref, watch } from 'vue'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+import Check from 'vue-material-design-icons/Check.vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
@@ -1068,6 +1097,7 @@ import InformationOutline from 'vue-material-design-icons/InformationOutline.vue
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Refresh from 'vue-material-design-icons/Refresh.vue'
+import Restore from 'vue-material-design-icons/Restore.vue'
 import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
 import CnRelationLinkModal from '../../dialogs/CnRelationLinkModal.vue'
 import CnWidgetStyleEditorModal from '../../dialogs/CnWidgetStyleEditorModal.vue'
@@ -1274,9 +1304,11 @@ export default {
 		CnTranslatedBadge,
 		CnWidgetStyleEditorModal,
 		CnRelationLinkModal,
+		Check,
 		Cog,
 		Plus,
 		Pencil,
+		Restore,
 	},
 
 	mixins: [gridLayout, pageViews],
@@ -1769,6 +1801,20 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Whether the user arranges each view (`views`) for themselves. On,
+		 * the header offers Arrange view next to the view switch; the
+		 * arrangement is stored per view and per user (the server, mirrored
+		 * in the browser) and a reset returns the view to its manifest
+		 * layout. Off (the default), a view renders as the manifest says.
+		 *
+		 * @type {boolean}
+		 */
+		userLayout: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Whether the Refresh entry renders in the page-header menu.
 		 * Tri-state:
@@ -2192,18 +2238,38 @@ export default {
 		 * belongs to; the record's display name follows as the current
 		 * crumb. `label` goes through the host translate function and shows
 		 * as text; `icon` (an MDI name, e.g. `Home`) draws that icon instead,
-		 * with the label as its accessible name. Null (the default) draws no
+		 * with the label as its accessible name. `currentField` names a field
+		 * of the record (a dotted path, e.g. `identifier`) whose value is the
+		 * current crumb instead of the display name; an empty value falls back
+		 * to the display name. `separator` draws that text (e.g. `/`) between
+		 * the crumbs instead of the chevron. Null (the default) draws no
 		 * trail.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-detail-page-drops-its-eyebrow-and-shows-a-breadcrumb
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-declared-breadcrumb-label-shows-as-text
-		 * @type {{label: string, route?: string, params?: object, href?: string, icon?: string}|null}
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 * @type {{label: string, route?: string, params?: object, href?: string, icon?: string, currentField?: string, separator?: string}|null}
 		 */
 		breadcrumb: {
 			type: Object,
 			default: null,
 		},
 
+		/**
+		 * Whether the record's widget cards (the body grid and the side
+		 * column) keep their overflow Actions menu when their definition does
+		 * not say (`showActions`). `false` (manifest
+		 * `config.showWidgetActions: false`) drops it, as on a dashboard; a
+		 * widget with `showActions: true` keeps its menu. A card that offers
+		 * an Add action keeps the menu that holds it. True by default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-detail-page-can-drop-the-widget-actions-menu
+		 */
+		showWidgetActions: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * A column of cards beside the body (manifest `config.sideColumn`),
 		 * for the record's facts: deadline, requester, handler, links. Each
@@ -2419,6 +2485,8 @@ export default {
 
 	data() {
 		return {
+			/** Whether the user is arranging the chosen view (`userLayout`). */
+			arrangingView: false,
 			/** Whether the record edit form is open. */
 			editFormOpen: false,
 			/**
@@ -3393,7 +3461,38 @@ export default {
 			} else if (crumb.href) {
 				first.href = crumb.href
 			}
-			return [first, { label: this.displayTitle }]
+			return [first, { label: this.breadcrumbCurrentLabel }]
+		},
+
+		/**
+		 * The current crumb: the record's `breadcrumb.currentField` value
+		 * (the case number on a case page) when declared and filled, else the
+		 * display name.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 * @return {string}
+		 */
+		breadcrumbCurrentLabel() {
+			const field = this.breadcrumb && this.breadcrumb.currentField
+			if (typeof field === 'string' && field !== '') {
+				const value = stageOf(this.resolvedObject, field)
+				if (value !== '') {
+					return value
+				}
+			}
+			return this.displayTitle
+		},
+
+		/**
+		 * The text drawn between the crumbs (`breadcrumb.separator`), or ''
+		 * for the chevron.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 * @return {string}
+		 */
+		breadcrumbSeparator() {
+			const separator = this.breadcrumb && this.breadcrumb.separator
+			return typeof separator === 'string' ? separator : ''
 		},
 
 		/**
@@ -3589,7 +3688,7 @@ export default {
 		viewDisplayLayout() {
 			// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- reading the flag IS the effect, as in bodyGridLayout
 			this.editingBody
-			return this.activeView ? this.closeDroppedRows(this.activeView.layout) : []
+			return this.activeView ? this.closeDroppedRows(this.activeViewLayout) : []
 		},
 
 		/**
@@ -3607,16 +3706,18 @@ export default {
 		 * chosen view's grid in the region the view switch controls (left out
 		 * when the view is empty; the empty state takes the region then).
 		 *
-		 * @return {Array<{key: string, view: boolean, layout: Array<object>, attrs: object}>}
+		 * @return {Array<{key: string, view: boolean, layout: Array<object>, editable: boolean, attrs: object}>}
 		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-page-declares-views-that-each-hold-a-widget-grid
 		 */
 		bodyGridSections() {
-			const sections = this.hasBodyGrid ? [{ key: 'body', view: false, layout: this.bodyGridLayout, attrs: {} }] : []
+			const sections = this.hasBodyGrid ? [{ key: 'body', view: false, layout: this.bodyGridLayout, editable: this.editingBody, attrs: {} }] : []
 			if (this.hasViews && !this.viewIsEmpty) {
 				sections.push({
 					key: `view-${this.activeViewId}`,
 					view: true,
 					layout: this.viewDisplayLayout,
+					// The user arranges the view while Arrange view is on.
+					editable: this.editingBody || this.arrangingView,
 					attrs: {
 						id: this.viewRegionId,
 						role: 'region',
@@ -3941,6 +4042,21 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Start or finish arranging the chosen view. Finishing stores the
+		 * arrangement of every view the user moved, once.
+		 *
+		 * @return {void}
+		 * @spec openspec/changes/page-view-user-layouts/specs/view-switch-containers/spec.md#requirement-a-user-arranges-each-view-for-themselves
+		 */
+		toggleArrangeView() {
+			const leaving = this.arrangingView
+			this.arrangingView = !this.arrangingView
+			if (leaving) {
+				this.saveViewUserLayouts()
+			}
+		},
+
 		// Expose the shared grid helpers to the template (grid mode + auto-body).
 		cnGridCellStyle,
 		hasGridRow,