@conduction/nextcloud-vue 2.65.0 → 2.67.0

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -145,6 +145,18 @@
 				</div>
 			</slot>
 			<div class="cn-detail-page__header-actions">
+				<!-- The page's view switch (`views`), unless a greeting header
+				     widget on the page draws it. Its options control the view
+				     region in the body. -->
+				<CnSegmentedControl
+					v-if="showsPageViewSwitch"
+					class="cn-page-view-switch"
+					:options="viewSwitchOptions"
+					:modelValue="activeViewId"
+					:ariaLabel="viewSwitchLabel"
+					:controls="viewRegionId"
+					data-testid="cn-detail-page-view-switch"
+					@update:modelValue="selectView" />
 				<!-- 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
@@ -609,15 +621,19 @@
 			     subscribed to the layout/widgets arrays — in-place pushes
 			     (Add widget) keep the same array identity and can't re-render
 			     it. One remount per edit flip re-subscribes it. -->
+			<!-- One grid per section: the body grid, then the chosen view
+			     (`views`) in a region the view switch controls. A view grid is
+			     keyed on its view, so switching mounts the other view's grid. -->
 			<CnDashboardGrid
-				v-if="hasBodyGrid"
-				:key="`cn-detail-grid-${editingBody ? 'editing' : 'live'}`"
-				:layout="bodyGridLayout"
+				v-for="section in bodyGridSections"
+				:key="`cn-detail-grid-${section.key}-${editingBody ? 'editing' : 'live'}`"
+				v-bind="section.attrs"
+				:layout="section.layout"
 				:editable="editingBody"
 				:columns="12"
 				:columnOpts="columnOpts"
 				class="cn-detail-page__grid"
-				@layoutChange="onBodyLayoutChange">
+				@layoutChange="section.view ? onViewLayoutChange($event) : onBodyLayoutChange($event)">
 				<template #widget="{ item }">
 					<div
 						class="cn-detail-page__grid-item"
@@ -727,6 +743,22 @@
 				</template>
 			</CnDashboardGrid>
 
+			<!-- The chosen view has nothing to draw: say so in the region,
+			     never leave a blank area under the switch. -->
+			<div
+				v-if="viewIsEmpty"
+				:id="viewRegionId"
+				role="region"
+				:aria-label="activeView ? activeView.label : null"
+				class="cn-page-view-region cn-page-view-region--empty"
+				data-testid="cn-detail-page-view-empty">
+				<NcEmptyContent :description="viewEmptyText">
+					<template #icon>
+						<ViewDashboardOutline :size="48" />
+					</template>
+				</NcEmptyContent>
+			</div>
+
 			<!-- Statistics table -->
 			<div v-if="hasStats" class="cn-detail-page__stats">
 				<!--
@@ -1036,6 +1068,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 ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
 import CnRelationLinkModal from '../../dialogs/CnRelationLinkModal.vue'
 import CnWidgetStyleEditorModal from '../../dialogs/CnWidgetStyleEditorModal.vue'
 import CnActionsMenu from '../CnActionsMenu/CnActionsMenu.vue'
@@ -1048,6 +1081,7 @@ import CnLifecycleActions from '../CnLifecycleActions/CnLifecycleActions.vue'
 import CnLockedBanner from '../CnLockedBanner/CnLockedBanner.vue'
 import CnNextStepCard from '../CnNextStepCard/CnNextStepCard.vue'
 import CnRelatedCollections from '../CnRelatedCollections/CnRelatedCollections.vue'
+import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import CnSummaryAggregates from '../CnSummaryAggregates/CnSummaryAggregates.vue'
 import CnTranslatedBadge from '../CnTranslatedBadge/CnTranslatedBadge.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
@@ -1055,6 +1089,7 @@ import { useObjectLock } from '../../composables/useObjectLock.js'
 import { useObjectPresence } from '../../composables/useObjectPresence.js'
 import { useObjectSubscription } from '../../composables/useObjectSubscription.js'
 import { gridLayout } from '../../mixins/gridLayout.js'
+import { pageViews } from '../../mixins/pageViews.js'
 import { useObjectStore } from '../../store/index.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { compactLayoutRows } from '../../utils/dashboardPlacement.js'
@@ -1227,6 +1262,8 @@ export default {
 		CnDetailWidgetHost,
 		CnFormDialog,
 		CnDashboardGrid,
+		CnSegmentedControl,
+		ViewDashboardOutline,
 		CnLifecycleActions,
 		CnActionButtons,
 		CnBreadcrumbs,
@@ -1242,7 +1279,7 @@ export default {
 		Pencil,
 	},
 
-	mixins: [gridLayout],
+	mixins: [gridLayout, pageViews],
 
 	inject: {
 		/**
@@ -3462,6 +3499,7 @@ export default {
 				&& this.currentObject
 				&& !this.hasDefaultSlotContent
 				&& !this.hasGridLayout
+				&& !this.hasViews
 		},
 
 		/**
@@ -3541,6 +3579,55 @@ export default {
 			return this.bodyGridLayout.length > 0
 		},
 
+		/**
+		 * The chosen view's layout as the grid draws it: items that draw
+		 * nothing leave and their rows close, as for the body grid.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
+		 */
+		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) : []
+		},
+
+		/**
+		 * Whether the chosen view has nothing to draw.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
+		 */
+		viewIsEmpty() {
+			return this.hasViews && this.viewDisplayLayout.length === 0
+		},
+
+		/**
+		 * The grids the body draws: the body grid when it has items, then the
+		 * 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}>}
+		 * @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: {} }] : []
+			if (this.hasViews && !this.viewIsEmpty) {
+				sections.push({
+					key: `view-${this.activeViewId}`,
+					view: true,
+					layout: this.viewDisplayLayout,
+					attrs: {
+						id: this.viewRegionId,
+						role: 'region',
+						'aria-label': this.activeView.label,
+						'data-testid': 'cn-detail-page-view-region',
+					},
+				})
+			}
+			return sections
+		},
+
 		/**
 		 * Whether the sidebar is rendered externally (via objectSidebarState inject)
 		 * rather than inline. When external, CnDetailPage only manages state —
@@ -4762,6 +4849,8 @@ export default {
 		 */
 		findWidget(item) {
 			return this.bodyGridWidgets.find((w) => w.id === item.widgetId)
+				|| this.findViewWidget(item.widgetId)
+				|| undefined
 		},
 
 		/**

package/src/components/CnFkResolveCell/CnFkResolveCell.vue

@@ -135,7 +135,9 @@ export default {
 			if (!store) {
 				return
 			}
-			const type = resolveObjectOpType(store, { register: this.register, schema: this.schema })
+			// `schema` is a slug the manifest author wrote, not a `$ref` title:
+			// use it exactly as given (a camelCase slug must not be kebab-cased).
+			const type = resolveObjectOpType(store, { register: this.register, schema: this.schema }, { exactSchema: true })
 			await Promise.all(this.ids.map(async (id) => {
 				if (this.labels[id]) {
 					return

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -513,6 +513,7 @@ import { draftKey, formDraftMixin, readDraft } from '../../composables/useFormDr
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { TENANT_CONTEXT_KEY } from '../../composables/useTenantContext.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
+import { resolveCreateOverrideHandler } from '../../utils/actionsDispatcher.js'
 import {
 	definitionQueryParams,
 	DYNAMIC_KEY_PREFIX,
@@ -757,6 +758,18 @@ export default {
 		 * identity when used standalone (no CnAppRoot ancestor).
 		 */
 		cnTranslate: { default: () => (key) => key },
+
+		/**
+		 * The app manifest, the v2 registry, the legacy customComponents map and
+		 * the registry-modal opener, all provided by CnAppRoot. A select-or-create
+		 * picker reads them to create an object the way the app's own index page
+		 * does (`config.createOverride` / `config.createModal`). Standalone (no
+		 * CnAppRoot) they are absent and the generic nested form is used.
+		 */
+		cnManifest: { default: null },
+		cnRegistry: { default: null },
+		cnCustomComponents: { default: null },
+		cnOpenModal: { default: null },
 	},
 
 	props: {
@@ -2649,6 +2662,16 @@ export default {
 				store.registerObjectType(slug, schemaRef, register)
 			}
 			const labelField = this.referenceLabelField(field)
+			// The app may own how this schema is created (pipelinq's client and
+			// contact need a contact-first endpoint; a plain save 400s). A
+			// create override keeps this form and saves through the app's
+			// handler; a create modal (only when no override exists) opens the
+			// app's own dialog instead of the generic form.
+			const appCreate = this.appCreateFor(register, schemaRef)
+			if (!appCreate.override && appCreate.modal) {
+				return this.openAppCreateModal(appCreate.modal, store, slug, labelField, term)
+			}
+			const override = appCreate.override
 			let schema = null
 			try {
 				schema = await store.fetchSchema(slug)
@@ -2656,14 +2679,113 @@ export default {
 				schema = null
 			}
 			if (!schema || !schema.properties) {
-				return store.saveObject(slug, { [labelField]: term })
+				const payload = { [labelField]: term }
+				return override
+					? override(payload, { register, schema: schemaRef, objectType: slug, effectiveSchema: null })
+					: store.saveObject(slug, payload)
 			}
 			const initialData = {}
 			if (term && schema.properties[labelField]) {
 				initialData[labelField] = term
 			}
 			return new Promise((resolve) => {
-				this.nestedCreate = { field, schema, register, slug, initialData, resolve }
+				this.nestedCreate = { field, schema, register, slug, schemaRef, initialData, override, resolve }
+			})
+		},
+
+		/**
+		 * How the app creates objects of a schema, read off the manifest page
+		 * that lists them: the index page whose `config.schema` (and, when it
+		 * names one, `config.register`) matches. Its `config.createOverride` is
+		 * resolved to the registered handler; its `config.createModal` is the
+		 * registry key of a `kind: 'modal'` dialog.
+		 *
+		 * @spec openspec/changes/review-round-two/specs/schema-utilities/spec.md
+		 * @param {string} register The reference's register.
+		 * @param {string} schemaRef The reference's schema slug or id.
+		 * @return {{override: (((formData: object, ctx: object) => Promise<object>)|null), modal: (string|null)}} What the app declared.
+		 */
+		appCreateFor(register, schemaRef) {
+			const none = { override: null, modal: null }
+			const pages = this.cnManifest && Array.isArray(this.cnManifest.pages) ? this.cnManifest.pages : []
+			const wanted = String(schemaRef).toLowerCase()
+			const page = pages.find((p) => {
+				const config = p && p.config
+				if (!config || config.schema === undefined || config.schema === null) {
+					return false
+				}
+				if (String(config.schema).toLowerCase() !== wanted) {
+					return false
+				}
+				return !config.register || String(config.register) === String(register)
+			})
+			if (!page) {
+				return none
+			}
+			const config = page.config
+			const override = typeof config.createOverride === 'function'
+				? config.createOverride
+				: resolveCreateOverrideHandler(config.createOverride, this.cnRegistry, this.cnCustomComponents)
+			const modalEntry = typeof config.createModal === 'string' && config.createModal !== ''
+				? (this.cnRegistry || {})[config.createModal]
+				: null
+			const modal = modalEntry && modalEntry.kind === 'modal' && typeof this.cnOpenModal === 'function'
+				? config.createModal
+				: null
+			return { override: override || null, modal }
+		},
+
+		/**
+		 * Open the app's own create dialog (a registry modal) for a picker and
+		 * wait for it. The dialog reports the new object (or its id) with a
+		 * `created` event; `close` without one resolves null so the field stays
+		 * as it was. A reported id is fetched so the picker can label it.
+		 *
+		 * @spec openspec/changes/review-round-two/specs/schema-utilities/spec.md
+		 * @param {string} key The registry key of the modal.
+		 * @param {object} store The object store.
+		 * @param {string} slug The object type slug.
+		 * @param {string} labelField The property the typed term belongs in.
+		 * @param {string} term The typed search term.
+		 * @return {Promise<object|null>} The created object, or null.
+		 */
+		openAppCreateModal(key, store, slug, labelField, term) {
+			return new Promise((resolve) => {
+				let settled = false
+				let reported = false
+				const settle = (value) => {
+					if (!settled) {
+						settled = true
+						resolve(value)
+					}
+				}
+				this.cnOpenModal(key, {
+					initialData: term ? { [labelField]: term } : {},
+					onCreated: async (created) => {
+						if (created && typeof created === 'object') {
+							settle(created)
+							return
+						}
+						if (typeof created !== 'string' && typeof created !== 'number') {
+							return
+						}
+						reported = true
+						let obj
+						try {
+							obj = await store.fetchObject(slug, String(created))
+						} catch {
+							obj = null
+						}
+						settle(obj || { id: String(created), [labelField]: term })
+					},
+					onClose: () => {
+						// A dialog often emits `close` right after `created`,
+						// while the id is still being fetched: that fetch settles.
+						if (!reported) {
+							settle(null)
+						}
+					},
+				})
 			})
 		},
 
@@ -2682,10 +2804,28 @@ export default {
 				return
 			}
 			const store = this.getObjectStore()
-			const created = store ? await store.saveObject(pending.slug, formData) : null
+			let created = null
+			let thrown = null
+			if (pending.override) {
+				// The app's create override owns persistence (same contract as
+				// CnIndexPage's `createOverride`).
+				try {
+					created = await pending.override(formData, {
+						register: pending.register,
+						schema: pending.schemaRef,
+						objectType: pending.slug,
+						effectiveSchema: pending.schema,
+					})
+				} catch (err) {
+					thrown = (err && err.response && err.response.data && err.response.data.error) || (err && err.message) || null
+				}
+			} else {
+				created = store ? await store.saveObject(pending.slug, formData) : null
+			}
 			if (!created) {
 				const error = store && store.errors ? store.errors[pending.slug] : null
-				const message = (error && error.message)
+				const message = thrown
+					|| (!pending.override && error && error.message)
 					|| t('nextcloud-vue', 'The item could not be created.')
 				const dialog = this.$refs.nestedCreateDialog
 				if (dialog && typeof dialog.setValidationErrors === 'function') {

package/src/components/CnHeaderWidget/CnHeaderWidget.vue

@@ -35,12 +35,15 @@
 			</a>
 		</div>
 		<!-- A view switch at the right of the heading (`content.views`): "My
-		     work / My team" as a segmented control whose options are routes. -->
+		     work / My team" as a segmented control whose options are routes,
+		     or views of the page the widget sits on (`option.view`); a view
+		     option controls the page's view region. -->
 		<div v-if="viewOptions.length > 0" class="cn-header-widget__views">
 			<CnSegmentedControl
 				:options="viewOptions"
 				:modelValue="activeView"
 				:ariaLabel="viewsLabel"
+				:controls="viewsRegionId"
 				data-testid="cn-header-widget-views"
 				@update:modelValue="onViewChange" />
 		</div>
@@ -66,6 +69,9 @@ const ALLOWED_TEXT_ALIGN = ['left', 'center', 'right']
 const ALLOWED_VERTICAL_ALIGN = ['top', 'middle', 'bottom']
 const ALLOWED_CTA_STYLES = ['primary', 'secondary', 'ghost']
 
+/** Marks a switch option that selects a page view rather than a route. */
+const VIEW_OPTION_PREFIX = 'view:'
+
 const HEIGHT_PIXELS = Object.freeze({
 	small: 120,
 	medium: 200,
@@ -121,6 +127,12 @@ export default {
 		 * untranslated key renders as itself.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/**
+		 * The views of the page this widget sits on, provided by
+		 * CnDashboardPage / CnDetailPage (`views`). An option with a `view`
+		 * selects one of them. Null outside such a page.
+		 */
+		cnPageViews: { default: null },
 	},
 
 	props: {
@@ -131,9 +143,12 @@ export default {
 		 * greeting, showDate, plain, ground, views}`. All fields are optional except
 		 * `title` (or `greeting`); unknown enum values collapse to documented
 		 * defaults and the renderer never throws. `views` is
-		 * `{ ariaLabel?, options: [{ label, route, params? }] }`: a segmented
-		 * control at the right of the heading whose checked option is the
-		 * current route; choosing another pushes its route. `ground: true`
+		 * `{ ariaLabel?, options: [{ label, route, params? } | { label, view }] }`:
+		 * a segmented control at the right of the heading whose checked option
+		 * is the current route; choosing another pushes its route. An option
+		 * with `view` selects that view of the page the widget sits on (the
+		 * page's `views`) instead, and the page then draws no switch of its
+		 * own. `ground: true`
 		 * draws the greeting on the page ground: the plain look with no
 		 * padding, a 32px heading and the date line 6px above it (a dashboard
 		 * also drops the widget's card for it).
@@ -229,12 +244,45 @@ export default {
 		 */
 		viewOptions() {
 			const raw = this.content && this.content.views && this.content.views.options
-			if (!Array.isArray(raw) || !this.$router) {
+			if (!Array.isArray(raw)) {
 				return []
 			}
+			const pageViewIds = this.pageViewIds
 			return raw
-				.filter((o) => o && typeof o.label === 'string' && o.label !== '' && typeof o.route === 'string' && o.route !== '')
-				.map((o) => ({ value: o.route, label: this.cnTranslate(o.label) }))
+				.filter((o) => o && typeof o.label === 'string' && o.label !== '')
+				.map((o) => {
+					if (typeof o.view === 'string' && o.view !== '') {
+						return pageViewIds.includes(o.view) ? { value: VIEW_OPTION_PREFIX + o.view, label: this.cnTranslate(o.label) } : null
+					}
+					if (typeof o.route === 'string' && o.route !== '' && this.$router) {
+						return { value: o.route, label: this.cnTranslate(o.label) }
+					}
+					return null
+				})
+				.filter(Boolean)
+		},
+
+		/**
+		 * The ids of the page's views, empty outside a page with views.
+		 *
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-greeting-header-can-switch-the-pages-views
+		 * @return {string[]}
+		 */
+		pageViewIds() {
+			const views = this.cnPageViews && Array.isArray(this.cnPageViews.views) ? this.cnPageViews.views : []
+			return views.map((view) => view.id)
+		},
+
+		/**
+		 * The id of the page's view region when an option selects a view,
+		 * for the options' `aria-controls`; '' otherwise.
+		 *
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-the-view-switch-is-accessible
+		 * @return {string}
+		 */
+		viewsRegionId() {
+			const hasViewOption = this.viewOptions.some((o) => o.value.startsWith(VIEW_OPTION_PREFIX))
+			return hasViewOption && this.cnPageViews ? (this.cnPageViews.regionId || '') : ''
 		},
 
 		/**
@@ -249,6 +297,11 @@ export default {
 			if (options.length === 0) {
 				return null
 			}
+			const activeView = this.cnPageViews ? this.cnPageViews.activeId : null
+			const viewMatch = activeView ? options.find((o) => o.value === VIEW_OPTION_PREFIX + activeView) : null
+			if (viewMatch) {
+				return viewMatch.value
+			}
 			const current = this.$route && this.$route.name
 			const match = options.find((o) => o.value === current)
 			return match ? match.value : options[0].value
@@ -263,7 +316,7 @@ export default {
 		 */
 		viewsLabel() {
 			const label = this.content && this.content.views && this.content.views.ariaLabel
-			return label ? this.cnTranslate(label) : t('nextcloud-vue', 'View')
+			return label ? this.cnTranslate(label) : t('nextcloud-vue', 'Views')
 		},
 
 		/**
@@ -697,6 +750,12 @@ export default {
 		 * @return {void}
 		 */
 		onViewChange(route) {
+			if (typeof route === 'string' && route.startsWith(VIEW_OPTION_PREFIX)) {
+				if (this.cnPageViews && typeof this.cnPageViews.select === 'function') {
+					this.cnPageViews.select(route.slice(VIEW_OPTION_PREFIX.length))
+				}
+				return
+			}
 			if (!this.$router || !route || route === (this.$route && this.$route.name)) {
 				return
 			}

package/src/components/CnIndexPage/CnIndexPage.md

@@ -386,7 +386,8 @@ export default {
 | `fieldOverrides` | Object | `{}` | Per-field config overrides passed to `CnFormDialog` |
 | `customComponents` | Object | `null` | Custom-component / handler registry. When set, takes precedence over the injected `cnCustomComponents` from CnAppRoot. Used to resolve `actions[].handler` registry names declared in the manifest (manifest-actions-dispatch). Named handlers resolve out of the v2 `registry` (a `kind: "handler"` entry) FIRST and fall back to this map. |
 | `showViewToggle` | Boolean | `true` | Whether to show the Cards/Table view toggle |
-| `inlineSearch` | Boolean | `false` | Show an inline search field in the actions bar (in addition to / instead of the sidebar search). Fed from the manifest as `pages[].config.inlineSearch`. |
+| `inlineSearch` | Boolean | `false` | Show an inline search field in the actions bar (in addition to / instead of the sidebar search). Fed from the manifest as `pages[].config.inlineSearch`. The field takes the place of the "Showing X of Y" counter unless `showCountWithSearch` is set. |
+| `showCountWithSearch` | Boolean | `false` | Keep the "Showing X of Y" counter visible beside the inline search field, after the search and any `#after-search` controls (only relevant with `inlineSearch`, which otherwise takes the counter's place). Fed from the manifest as `pages[].config.showCountWithSearch`. |
 | `searchPlaceholder` | String | `''` | Placeholder for the inline search field (manifest `config.searchPlaceholder`). |
 | `cardsLabel` | String | `''` | Label for the cards view-toggle option (manifest `config.cardsLabel`, e.g. "Tiles"). |
 | `tableLabel` | String | `''` | Label for the table view-toggle option (manifest `config.tableLabel`, e.g. "List"). |

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -59,6 +59,7 @@
 			:showSearch="inlineSearch"
 			:searchValue="effectiveSearchValue"
 			:searchPlaceholder="searchPlaceholder"
+			:showCountWithSearch="showCountWithSearch"
 			:refreshing="effectiveRefreshing"
 			:refreshDisabled="refreshDisabled"
 			:addDisabled="addDisabled"
@@ -417,6 +418,21 @@
 					<NcLoadingIcon :size="32" :name="loadingText" />
 				</div>
 
+				<!-- Error state: the latest self-fetch failed (e.g. a search term the server rejects) -->
+				<div v-else-if="selfFetchFailed"
+					class="cn-index-page__empty"
+					role="status"
+					data-testid="cn-index-page-fetch-error">
+					<NcEmptyContent :name="t('nextcloud-vue', 'An error occurred')"
+						:description="effectiveSearchValue
+							? t('nextcloud-vue', 'Change the search or try again.')
+							: t('nextcloud-vue', 'Try again later.')">
+						<template #icon>
+							<AlertCircleOutline :size="64" />
+						</template>
+					</NcEmptyContent>
+				</div>
+
 				<!-- Empty state -->
 				<div v-else-if="effectiveObjects.length === 0" class="cn-index-page__empty">
 					<slot name="empty">
@@ -774,6 +790,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { translate as t } from '@nextcloud/l10n'
 import { NcActionButton, NcActionCaption, NcActionCheckbox, NcActions, NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import { getCurrentInstance, inject, markRaw, ref } from 'vue'
+import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import DatabaseSearch from 'vue-material-design-icons/DatabaseSearch.vue'
@@ -1054,6 +1071,7 @@ export default {
 		NcActionCaption,
 		NcActionCheckbox,
 		NcButton,
+		AlertCircleOutline,
 		Close,
 		Cog,
 		DatabaseSearch,
@@ -2034,6 +2052,17 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Keep the "Showing X of Y" counter visible beside the inline search field,
+		 * after any `#after-search` controls (only relevant with `inlineSearch`,
+		 * which otherwise takes the counter's place). Fed from the manifest as
+		 * `pages[].config.showCountWithSearch`.
+		 */
+		showCountWithSearch: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Placeholder for the inline search field (manifest `config.searchPlaceholder`) */
 		searchPlaceholder: {
 			type: String,
@@ -2934,11 +2963,23 @@ export default {
 			return this.isSelfFetch && !!this.list
 		},
 
+		/**
+		 * Whether the latest self-fetch failed. The store keeps the previous
+		 * rows and pagination on a failed fetch, so while this holds the page
+		 * shows its error state instead of results for an earlier query.
+		 */
+		selfFetchFailed() {
+			return this.isSelfFetchMode && !!this.list.error?.value
+		},
+
 		/** Rows: store collection in self-fetch mode, else the `objects` prop. */
 		effectiveObjects() {
 			if (this.isNamedSource) {
 				return this.namedRows
 			}
+			if (this.selfFetchFailed) {
+				return []
+			}
 			return this.isSelfFetchMode ? (this.list.objects.value || []) : this.objects
 		},
 
@@ -3342,7 +3383,9 @@ export default {
 				s: this.exportSchemaSlug,
 				f: this.filter || null,
 				e: this.countEntries,
-				t: Number(this.effectivePagination?.total ?? 0),
+				// The store's total, not the error override in effectivePagination,
+				// so a failed fetch and its recovery do not refetch the counts.
+				t: Number((this.isSelfFetchMode ? this.list.pagination.value : this.effectivePagination)?.total ?? 0),
 			})
 		},
 
@@ -3748,6 +3791,9 @@ export default {
 
 		/** Pagination: store pagination in self-fetch mode, else the `pagination` prop. */
 		effectivePagination() {
+			if (this.selfFetchFailed) {
+				return { ...this.list.pagination.value, total: 0, page: 1, pages: 1 }
+			}
 			return this.isSelfFetchMode ? this.list.pagination.value : this.pagination
 		},
 

package/src/components/CnSegmentedControl/CnSegmentedControl.md

@@ -43,4 +43,4 @@ export default {
 </script>
 ```
 
-Props: `options` lists the choices, `modelValue` is the chosen value (use `v-model`), `aria-label` names the group (or point `aria-labelledby` at a visible heading), and `stretch` fills the width.
+Props: `options` lists the choices, `modelValue` is the chosen value (use `v-model`), `aria-label` names the group (or point `aria-labelledby` at a visible heading), `controls` names the id of the element the options switch (set as `aria-controls` on every option), and `stretch` fills the width.

package/src/components/CnSegmentedControl/CnSegmentedControl.vue

@@ -20,6 +20,7 @@
 			:aria-checked="isChecked(option) ? 'true' : 'false'"
 			:tabindex="index === focusableIndex ? 0 : -1"
 			:disabled="option.disabled || null"
+			:aria-controls="controls || null"
 			:data-value="option.key"
 			@click="select(option)">
 			<!-- @slot option Replaces the content of one option. -->
@@ -95,6 +96,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Id of the element the options switch, such as the region holding a
+		 * page view's widgets. Set as `aria-controls` on every option.
+		 *
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-the-view-switch-is-accessible
+		 */
+		controls: {
+			type: String,
+			default: '',
+		},
+
 		/** Stretch the control to the full width, with options of equal width. */
 		stretch: {
 			type: Boolean,