@conduction/nextcloud-vue 2.67.0 → 2.69.0

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 35372297 bytes
-sha256: 7065df25e721d338e4612aac2ee75c58c87fb5e17477c811e7bcf66cee41783d
+size: 35499103 bytes
+sha256: fe1cf925335eec45a51c59903eb32d313c16bdcbdaf047c4b80fad05712db22a

package/l10n/en.json

@@ -1092,6 +1092,9 @@
     "An attention card needs a title": "An attention card needs a title",
     "Good morning, {name}": "Good morning, {name}",
     "This view has no widgets yet.": "This view has no widgets yet.",
+    "Arrange view": "Arrange view",
+    "Reset view": "Reset view",
+    "Reset layout": "Reset layout",
     "Good morning": "Good morning",
     "Good afternoon, {name}": "Good afternoon, {name}",
     "Good afternoon": "Good afternoon",

package/l10n/nl.json

@@ -1136,6 +1136,9 @@
     "An attention card needs a title": "Een aandachtskaart heeft een titel nodig",
     "Good morning, {name}": "Goedemorgen, {name}",
     "This view has no widgets yet.": "Deze weergave heeft nog geen widgets.",
+    "Arrange view": "Weergave indelen",
+    "Reset view": "Weergave herstellen",
+    "Reset layout": "Indeling herstellen",
     "Good morning": "Goedemorgen",
     "Good afternoon, {name}": "Goedemiddag, {name}",
     "Good afternoon": "Goedemiddag",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.67.0",
+  "version": "2.69.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/scripts/.jsdoc-baselines.json

@@ -111,7 +111,7 @@
   "CnIconPicker": 1,
   "CnImageWidget": 1,
   "CnImageWidgetForm": 1,
-  "CnIndexPage": 0.74,
+  "CnIndexPage": 0.79,
   "CnIndexSidebar": 0.69,
   "CnInfoWidget": 1,
   "CnIntegrationCard": 1,
@@ -202,7 +202,7 @@
   "CnRichSubmitDialog": 1,
   "CnRoadmapItem": 1,
   "CnRoadmapTab": 1,
-  "CnRowActions": 0.8,
+  "CnRowActions": 1,
   "CnSavedViewsControl": 1,
   "CnSaveViewDialog": 1,
   "CnSchemaFormDialog": 0.79,

package/src/components/CnContextMenu/CnContextMenu.vue

@@ -12,7 +12,7 @@
 			@close="onClose"
 			@closed="onClosed">
 			<!-- Dynamic actions from array prop -->
-			<template v-for="{ action, link } in renderedActions" :key="action.label">
+			<template v-for="{ action, link } in renderedActions" :key="actionKey(action)">
 				<!-- A navigate-only action is a real link, so it can be middle-clicked, opened in a new tab or copied. -->
 				<NcActionLink
 					v-if="link"
@@ -20,7 +20,7 @@
 					:target="link.target"
 					:title="resolveTitle(action)"
 					:class="{ 'cn-row-action--destructive': action.destructive }"
-					:data-testid="`cn-action-item-${slugifyLabel(action.label)}`"
+					:data-testid="actionTestId(action)"
 					closeAfterClick
 					@click="onLinkAction(action, link, $event)">
 					<template v-if="action.icon" #icon>
@@ -34,7 +34,7 @@
 					:title="resolveTitle(action)"
 					:disabled="resolveDisabled(action)"
 					:class="{ 'cn-row-action--destructive': action.destructive }"
-					:data-testid="`cn-action-item-${slugifyLabel(action.label)}`"
+					:data-testid="actionTestId(action)"
 					closeAfterClick
 					@click="onAction(action)">
 					<template v-if="action.icon" #icon>
@@ -95,6 +95,7 @@ import { NcActionButton, NcActionLink, NcActions } from '@nextcloud/vue'
 import { CTX_MENU_DATA_ATTR, CTX_MENU_POPPER_ATTR } from '../../composables/useContextMenu.js'
 import { followItemActionLink, resolveItemActionLink } from '../../utils/actionLink.js'
 import { isModifiedClick } from '../../utils/linkNavigation.js'
+import { isRowActionVisible, rowActionKey, rowActionPayload, rowActionTestId, slugifyActionLabel } from '../../utils/rowActionItem.js'
 import { CnIcon } from '../CnIcon/index.js'
 
 /**
@@ -109,12 +110,13 @@ import { CnIcon } from '../CnIcon/index.js'
  * cursor positioning). The composable handles the DOM attributes; this component
  * handles the NcActions template boilerplate.
  *
- * Dynamic actions (CnIndexPage pattern)
+ * Dynamic actions (CnIndexPage pattern).
+ * CnIndexPage passes the same per-row list its row actions menu renders, so the two menus always match.
  * ```vue
  * <CnContextMenu
  *   v-model:open="contextMenuOpen"
- *   :actions="mergedActions"
- *   :target-item="contextMenuRow"
+ *   :actions="rowActionsFor(contextMenuShownRow)"
+ *   :target-item="contextMenuShownRow"
  *   @action="$emit('action', $event)"
  *   @close="closeContextMenu" />
  * ```
@@ -161,13 +163,15 @@ export default {
 		 * `visible` (boolean | (targetItem) => boolean) hides the entry when falsy
 		 * (default: shown). `title` (string | (targetItem) => string) renders as
 		 * a native tooltip — useful for explaining why an entry is disabled.
+		 * A locally decidable `visibleWhen` that is false for the target hides the entry too, as in CnRowActions.
+		 * `id` is passed in the `action` payload; `builtin` marks a CnIndexPage built-in, whose testid is `cn-action-item-<id>` in every locale.
 		 * `href` (URL) or `to` (vue-router location), each a value or a
 		 * `(targetItem) => …` function, render the entry as a real link, with
 		 * `linkTarget` as its `target`; a link emits `action` but does not call
 		 * `handler`. When the entire array is empty (or all entries are filtered
 		 * out), only the default slot content is rendered.
 		 *
-		 * @type {Array<{label: string, icon: object | string, handler: (targetItem: object) => void, disabled: boolean | ((targetItem: object) => boolean), visible: boolean | ((targetItem: object) => boolean), title: string | ((targetItem: object) => string), destructive: boolean, href: string | ((targetItem: object) => string), to: string | object | ((targetItem: object) => string | object), linkTarget: string}>}
+		 * @type {Array<{label: string, id: string, builtin: boolean, icon: object | string, handler: (targetItem: object) => void, disabled: boolean | ((targetItem: object) => boolean), visible: boolean | ((targetItem: object) => boolean), visibleWhen: object, title: string | ((targetItem: object) => string), destructive: boolean, href: string | ((targetItem: object) => string), to: string | object | ((targetItem: object) => string | object), linkTarget: string}>}
 		 */
 		actions: {
 			type: Array,
@@ -209,21 +213,13 @@ export default {
 
 	computed: {
 		/**
-		 * Filter actions by their `visible` predicate. Entries without
-		 * `visible` are always shown (backwards compatible).
+		 * Filter actions by their `visibleWhen` and `visible` gates, with the same rule CnRowActions uses.
+		 * Entries without either always show.
 		 *
 		 * @return {Array} Visible actions for the current targetItem.
 		 */
 		visibleActions() {
-			return this.actions.filter((action) => {
-				if (action.visible === undefined) {
-					return true
-				}
-				if (typeof action.visible === 'function') {
-					return !!action.visible(this.targetItem)
-				}
-				return !!action.visible
-			})
+			return this.actions.filter((action) => isRowActionVisible(action, this.targetItem))
 		},
 
 		/**
@@ -466,18 +462,33 @@ export default {
 
 		/**
 		 * Slugify an action label for use in stable `data-testid` selectors.
-		 * Lowercase, kebab-case, strip non-alphanumeric. Used solely by the
-		 * `:data-testid` binding on NcActionButton — does not affect runtime
-		 * behaviour or rendered text.
+		 * Lowercase, kebab-case, strip non-alphanumeric.
 		 *
 		 * @param {string} label The action's display label.
 		 * @return {string} kebab-case slug suitable for a testid suffix.
 		 */
 		slugifyLabel(label) {
-			return String(label || '')
-				.toLowerCase()
-				.replace(/[^a-z0-9]+/g, '-')
-				.replace(/^-+|-+$/g, '')
+			return slugifyActionLabel(label)
+		},
+
+		/**
+		 * The entry's `data-testid`: `cn-action-item-<id>` for a built-in, the label slug otherwise.
+		 *
+		 * @param {object} action The action descriptor.
+		 * @return {string} The testid.
+		 */
+		actionTestId(action) {
+			return rowActionTestId(action)
+		},
+
+		/**
+		 * The entry's render key: `builtin:<id>` for a built-in, the label otherwise.
+		 *
+		 * @param {object} action The action descriptor.
+		 * @return {string} The key.
+		 */
+		actionKey(action) {
+			return rowActionKey(action)
 		},
 
 		onAction(action) {
@@ -485,10 +496,10 @@ export default {
 				action.handler(this.targetItem)
 			}
 			/**
-			 * @event action User picked an entry from the menu. The action's own `handler(targetItem)` (when present) ran synchronously before this event fires; the event lets parents observe / log the choice.
-			 * @type {{ action: string, row: object|null }}
+			 * @event action User picked an entry from the menu. The action's own `handler(targetItem)` (when present) ran synchronously before this event fires; the event lets parents observe / log the choice. Payload: `action` (the label), the target as `row`, the action's `id` when it has one, and `builtin: true` for a CnIndexPage built-in.
+			 * @type {{ action: string, row: object|null, id?: string, builtin?: boolean }}
 			 */
-			this.$emit('action', { action: action.label, row: this.targetItem })
+			this.$emit('action', rowActionPayload(action, this.targetItem))
 		},
 
 		/**
@@ -506,7 +517,7 @@ export default {
 				return
 			}
 			followItemActionLink(event, link, this.$router)
-			this.$emit('action', { action: action.label, row: this.targetItem })
+			this.$emit('action', rowActionPayload(action, this.targetItem))
 		},
 
 		onClose() {

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. -->
@@ -754,6 +767,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 +782,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 +918,7 @@ export default {
 		NcLoadingIcon,
 		NcSelect,
 		Pencil,
+		Restore,
 		Check,
 		Cog,
 		CalendarRange,
@@ -1958,7 +1972,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 +2014,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 +2736,7 @@ export default {
 			// the user's arrangement is finished when they say it is.
 			if (leaving) {
 				this.saveUserLayout()
+				this.saveViewUserLayouts()
 			}
 
 			/**
@@ -2780,6 +2796,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 +2859,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) {
@@ -3906,7 +3905,7 @@ 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']) {
 				if (props[key] !== undefined) {
 					out[key] = props[key]
 				}

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 |

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -157,6 +157,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 +651,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"
@@ -1060,6 +1085,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 +1094,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 +1301,11 @@ export default {
 		CnTranslatedBadge,
 		CnWidgetStyleEditorModal,
 		CnRelationLinkModal,
+		Check,
 		Cog,
 		Plus,
 		Pencil,
+		Restore,
 	},
 
 	mixins: [gridLayout, pageViews],
@@ -1769,6 +1798,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:
@@ -2419,6 +2462,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,
 			/**
@@ -3589,7 +3634,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 +3652,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 +3988,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,