@conduction/nextcloud-vue 2.105.0 → 2.106.0

package/src/components/CnFlowRunsWidget/CnFlowRunsWidget.vue

@@ -105,9 +105,10 @@ import { translate as t } from '@nextcloud/l10n'
 import { NcLoadingIcon } from '@nextcloud/vue'
 import { computed, inject, ref } from 'vue'
 import { useEndpointSource } from '../../composables/useEndpointSource.js'
+import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
-import { resolveFilterValue } from '../../utils/resolveFilterTokens.js'
+import { resolveDeepTokens, resolveFilterValue } from '../../utils/resolveFilterTokens.js'
 
 /**
  * The OpenRegister endpoint that lists the caller's live flow runs.
@@ -205,6 +206,8 @@ export default {
 		 * so a library string localises through the consuming app's l10n.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/** The page's action dispatcher (CnPageRenderer), for `headerAction`. */
+		cnDispatchAction: { default: null },
 	},
 
 	props: {
@@ -228,6 +231,10 @@ export default {
 		 *   subject's finished runs render below it. Absent = today's org-wide
 		 *   widget, unchanged.
 		 * - `emptyText` — override for the "nothing running" line.
+		 * - `headerAction` — an action descriptor drawn in the card header
+		 *   (`{ label, icon?, ...action }`, "Flow uitvoeren"), reported through
+		 *   the `header` event and dispatched with the page's dispatcher; its
+		 *   tokens resolve against the record. The runs are read again after it.
 		 *
 		 * @type {{limit?: number, pollSeconds?: number, rowRoute?: string, runRoute?: string, subject?: string, emptyText?: string, title?: string}}
 		 */
@@ -257,6 +264,8 @@ export default {
 		},
 	},
 
+	emits: ['header'],
+
 	setup(props) {
 		// The shared endpoint engine owns request dedup, the short-TTL cache
 		// and the cn:page:refresh / cn:widget:refresh subscriptions — the same
@@ -352,6 +361,7 @@ export default {
 			refetchCompleted,
 			resolvedSubject,
 			injectedTranslate,
+			tokenCtx,
 		}
 	},
 
@@ -521,7 +531,17 @@ export default {
 		},
 	},
 
+	watch: {
+		'content.headerAction': {
+			deep: true,
+			handler() {
+				this.emitHeader()
+			},
+		},
+	},
+
 	mounted() {
+		this.emitHeader()
 		this.startPolling()
 		document.addEventListener('visibilitychange', this.onVisibilityChange)
 	},
@@ -531,6 +551,47 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Tell the card around the runs what its header shows: the header
+		 * action, if any.
+		 *
+		 * @return {void}
+		 */
+		emitHeader() {
+			const action = this.content && this.content.headerAction
+			const usable = action && typeof action === 'object' && typeof action.label === 'string' && action.label !== ''
+			/**
+			 * @event header The card header's parts: `{ link, note, action, pill }`, `action` being `{ label, icon, run }` or null.
+			 */
+			this.$emit('header', {
+				link: null,
+				note: '',
+				action: usable ? { label: this.tr(action.label), icon: action.icon || '', run: () => this.runHeaderAction() } : null,
+				pill: null,
+			})
+		},
+
+		/**
+		 * Run the header action with the record's tokens resolved, then read the
+		 * runs again so a started run shows.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async runHeaderAction() {
+			const { label, icon, ...action } = resolveDeepTokens(this.content.headerAction, this.tokenCtx())
+			try {
+				const outcome = await (typeof this.cnDispatchAction === 'function'
+					? this.cnDispatchAction(action)
+					: dispatchAction(action, { router: this.$router || null }))
+				if (outcome === false) {
+					return
+				}
+			} catch {
+				return
+			}
+			this.refetchAll()
+		},
+
 		/**
 		 * Start (or restart) the refetch interval, unless polling is disabled.
 		 *

package/src/components/CnIndexPage/CnIndexPage.md

@@ -416,7 +416,7 @@ export default {
 | `quickFilterMode` | String | `'chips'` | How the quick filters render: `'chips'` (pill strip) or `'dropdown'` (a single `NcSelect`). Fed from `pages[].config.quickFilterMode`. |
 | `quickFilterMultiple` | Boolean | `false` | Allow several quick filters active at once; selected tabs' filters are OR-ed into the fetch (same field → `field[]=` array). Fed from `pages[].config.quickFilterMultiple`. |
 | `quickFilterMaxVisible` | Number | `0` | Chips mode only — how many quick-filter pills render inline before the rest move behind one more chip — a `⋯` pill that opens a panel of the hidden lenses. `0` renders every tab, which wraps the actions bar onto a second line once a page declares more than a handful. The visible set is the first *n* entries of `quickFilters`. Fed from `pages[].config.quickFilterMaxVisible`. |
-| `quickFilterPlacement` | String | `''` | Where the quick-filter chips sit. `'toolbar'` keeps them on one row with the Filter button and the view switch, in whatever width that row has beside a side panel (DqTeamwachtrij): the chips take the room the buttons leave, and those that do not fit move behind the overflow chip. Fed from `pages[].config.quickFilterPlacement`. |
+| `quickFilterPlacement` | String | `''` | Where the quick-filter chips sit. `'toolbar'` keeps them on one row with the Filter button and the view switch, in whatever width that row has beside a side panel (DqTeamwachtrij): the chips take the room the buttons leave, and those that do not fit move behind the overflow chip. Fed from `pages[].config.quickFilterPlacement`. `'row'` puts them on a row of their own above the toolbar, wrapping onto more lines instead of folding into the overflow chip (DqTeamwachtrij); beside a side panel the row sits in the list column. |
 | `cardComponent` | String | `''` | Optional name of a consumer-provided card component (registered in the v2 `registry` — any kind carrying a `component` — or in the legacy `customComponents` map on `CnAppRoot`) to render in place of the default `CnObjectCard` when the page is in card-grid view mode. Resolution priority: `#card` scoped slot → `cardComponent` registry entry → default `CnObjectCard`. Unknown names log `console.warn` once and fall back to the default. |
 | `customComponents` | Object | `null` | Optional explicit `customComponents` registry. Overrides the registry injected from `CnAppRoot` via `cnCustomComponents`. Mostly used by unit tests; production consumers register components on `CnAppRoot` instead. |
 | `subscribe` | Boolean | `true` | Self-fetch mode only. When `register` + `schema` are set (and no `objects` prop), the page subscribes to the collection's `or-collection-{register}-{schema}` live-update scope on mount and refetches on an update event; released on unmount. Set `false` (manifest: `config.subscribe: false`) for static / read-once views. No-op in consumer-managed mode or on stores without live-updates support. |
@@ -879,9 +879,9 @@ The list view (`view-mode="list"`) and standalone sort dropdown add these props:
 | `listIcon` | String | `''` | MDI icon for the list view-toggle option. |
 | `listConfig` | Object | `{}` | Field mapping for the default list rows (`CnObjectRow`). |
 | `listComponent` | String | `''` | Custom row component, resolved against the v2 `registry` (any kind carrying a `component`) and then the legacy `customComponents` map. |
-| `showSortSelect` | Boolean | `false` | Show a standalone sort dropdown in the actions bar. |
-| `sortSelectOptions` | Array | `[]` | Options `{ value, label, order? }` for the sort dropdown. On a self-fetch page a choice orders the list as a header click does (`_order`, kept in the address): by the option's `order`, else its `value` read as an order (`"-createdAt"`, `"priority:desc,title"`). |
-| `sortSelectValue` | String | `''` | Selected sort dropdown value. Empty lets a self-fetch page show the option matching its current order, so a header click that matches an option shows it. |
+| `showSortSelect` | Boolean | `false` | Deprecated, without effect: the toolbar draws no sort select. The table sorts by its column headers; the list, card and map views by the Sort section in the index sidebar. |
+| `sortSelectOptions` | Array | `[]` | The orders the index sidebar's Sort section offers in the list, card and map views: `{ value, label, order? }`, the order its `order` or its `value` read as one (`"-createdAt"`, `"priority:desc,title"`). Without them the section offers the sortable columns. |
+| `sortSelectValue` | String | `''` | Deprecated, without effect: the Sort section shows the current order. |
 | `defaultOrder` | String, Object or Array | `''` | The order a self-fetch page opens on when neither the address nor `sortKeys`/`sortKey` gives one (manifest `config.defaultOrder`): `"-createdAt"`, `"priority:desc,title"`, an `_order` map `{ "priority": "desc" }` or a `[{ key, order }]` list. |
 
 The `#list-item`, `#row-icon`, `#row-badges`, and `#row-actions` slots override the list rows (see [CnObjectList](./cn-object-list.md)). Emits `@sort-change` with the chosen sort value.
@@ -1097,6 +1097,8 @@ Sources: `register` (fetch the folder list from an OpenRegister `register`/`sche
 }
 ```
 
+`scopeViews` limits the scope's look (columns, title, count line and the other scope keys) to the view modes it names, e.g. `["table", "list"]`, so a board view keeps the page's generic look (DqWerkbord) while the scope still filters it.
+
 `pane: false` draws no pane. The folder still comes from the deep-link filter (`/cases?caseType=<uuid>`) and its scope look (title, count line, columns, quick filters, `afterList` from the folder or its row's `x-index`) still applies, so a list narrowed to one case type looks like that case type's list without a folder column (boards DqWooVerzoeken, DqKlachten):
 
 ```json
@@ -1149,7 +1151,7 @@ columns are right.
 
 ## Board look
 
-With `look: "board"` (the page's `look` prop, `config.look`, or the app's) the index page takes the DqZaken setup: a header with the count line from `countText` (`{shown}`, `{total}`), the buttons Download, Actions, the buildiq square and the primary one in that order, a two-row toolbar (saved-view chips, Filter with a count and the view switch; then search and active filter chips), a bulk band between toolbar and table (`bulkHint`), the table as a white card with one menu button per row, and a footer inside the card (`footerNote`). `cardFields` names the facts of each card in the cards view. Without the look nothing changes.
+With `look: "board"` (the page's `look` prop, `config.look`, or the app's) the index page takes the DqZaken setup: a header with the count line from `countText` (`{shown}`, `{total}`), the buttons Download, Actions, the buildiq square and the primary one in that order, a two-row toolbar (saved-view chips, Filter with a count and the view switch; then search and active filter chips), a bulk band between toolbar and table (`bulkHint`), the table as a white card with one menu button per row, and a footer inside the card (`footerNote`). `cardFields` names the facts of each card in the cards view, and `cardLayout` draws each card as a record instead: a pill and the number on the head row, the title, a meta line, and a footer with a pill and a date, every part from a field (`{ headPill: { field, colorMap, labels }, number, title, meta: [...], footerPill, footerDate: { field, label } }`). Without the look nothing changes.
 
 `bulkBandAlways` (`config.bulkBandAlways`) draws the board bulk band before a selection too, its buttons
 disabled until rows are selected (DqZaken, DqWerkbord).

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -157,6 +157,25 @@
 			:widgets="sidePanel" />
 
 		<!-- Actions bar -->
+		<!-- `quickFilterPlacement: "row"`: the chips on a row of their own above
+		     the toolbar, wrapping onto more lines (DqTeamwachtrij). -->
+		<div
+			v-if="quickFilterPlacement === 'row' && tabStripEntries && tabStripEntries.length > 0"
+			class="cn-index-page__quick-filter-row"
+			data-testid="cn-index-page-quick-filter-row">
+			<CnQuickFilterBar
+				inline
+				:tabs="tabStripEntries"
+				:mode="quickFilterMode"
+				:maxVisible="quickFilterMaxVisible"
+				:fit="false"
+				:multiple="quickFilterMultiple"
+				:activeIndex="activeQuickFilterIndex"
+				:selectedIndices="selectedQuickFilterIndices"
+				:counts="effectiveTabCounts"
+				@update:activeIndex="onQuickFilterChange"
+				@update:selectedIndices="onQuickFilterMultiChange" />
+		</div>
 		<CnActionsBar
 			:layout="isBoardLook ? 'board' : 'nextcloud'"
 			:activeFilterChips="activeFilterChips"
@@ -189,9 +208,6 @@
 			:mapLabel="mapLabel"
 			:mapIcon="mapIcon"
 			:listIcon="listIcon"
-			:showSortSelect="showSortSelect"
-			:sortOptions="sortSelectOptions"
-			:sortValue="effectiveSortSelectValue"
 			:showSearch="search !== false && (inlineSearch || isBoardLook)"
 			:searchPlacement="searchPlacement"
 			:searchValue="effectiveSearchValue"
@@ -210,7 +226,6 @@
 			:bulkActions="mergedBulkActions"
 			:documentationUrl="documentationUrl"
 			:documentationLabel="documentationLabel || undefined"
-			@sortChange="onSortSelectChange"
 			@add="onAddClick"
 			@clearSelection="onSelect([])"
 			@removeFilter="onRemoveActiveFilter"
@@ -365,7 +380,7 @@
 			     (between the view toggle and the actions) when the manifest
 			     declares `config.quickFilters`. Switching tabs re-fetches with
 			     the merged filter; @event quick-filter-change. -->
-			<template v-if="tabStripEntries && tabStripEntries.length > 0" #filters>
+			<template v-if="tabStripEntries && tabStripEntries.length > 0 && quickFilterPlacement !== 'row'" #filters>
 				<CnQuickFilterBar
 					inline
 					:tabs="tabStripEntries"
@@ -373,7 +388,7 @@
 					:maxVisible="quickFilterMaxVisible"
 					:fit="quickFilterPlacement === 'toolbar'"
 					:multiple="quickFilterMultiple"
-					:activeIndex="activeQuickFilterIndex"
+					:activeIndex="shownQuickFilterIndex"
 					:selectedIndices="selectedQuickFilterIndices"
 					:counts="effectiveTabCounts"
 					@update:activeIndex="onQuickFilterChange"
@@ -772,7 +787,7 @@
 					:rowTitle="rowTitle"
 					:showUnread="showUnreadRows"
 					:filterable="tableHeaderFilters"
-					:activeFilters="effectiveActiveFilters"
+					:activeFilters="tableActiveFilters"
 					:filterRegister="typeof register === 'string' ? register : ''"
 					@columnFilter="onColumnFilterEvent"
 					@sort="onSortEvent"
@@ -1057,6 +1072,8 @@
 					:selectable="selectable"
 					:clickToView="rowClickOpens"
 					:cardFields="resolvedCardFields"
+					:cardLayout="cardLayout"
+					:cardFieldColumns="cardFieldColumns"
 					:accentOf="cardAccent"
 					:selectedIds="internalSelectedIds"
 					:rowKey="rowKey"
@@ -1229,6 +1246,8 @@
 			:showMetadata="resolvedSidebar.showMetadata !== false"
 			:personalColumns="personalColumns"
 			:pinnedCount="pinnedColumnCount"
+			:sortOptions="sidebarSortOptions"
+			:currentSort="currentSortKeys"
 			v-bind="sidebarSearchProps"
 			@update:open="sidebarOpen = $event"
 			@search="onSearchEvent"
@@ -1237,7 +1256,8 @@
 			@pinChange="onPinChange"
 			@columnsReset="onColumnsReset"
 			@filterChange="onFilterEvent"
-			@clearFilters="onClearFilters" />
+			@clearFilters="onClearFilters"
+			@sortChange="onSidebarSortChange" />
 	</div>
 </template>
 
@@ -1285,6 +1305,7 @@ import {
 	refIdOf,
 	resolveDropValue,
 } from '../../utils/boardReferenceColumns.js'
+import { isColumnSortable } from '../../utils/columnFilters.js'
 import { reportBindingProblems } from '../../utils/diagnostics.js'
 import { fetchGroupedCounts } from '../../utils/fetchAggregate.js'
 import { fetchFilterCounts, fetchListTotal } from '../../utils/fetchFilterCounts.js'
@@ -1311,7 +1332,7 @@ import { DEFAULT_ROW_INDICATOR_CAP } from '../../utils/rowIndicators.js'
 import { buildRouteQueryFromViewState, buildViewCreatePayload, extractViewState, extractViewStateFromRouteQuery, normalizeSharedWith, savedViewScope, viewMatchesScope } from '../../utils/savedViewHelpers.js'
 import { columnsFromSchema, fieldsFromSchema } from '../../utils/schema.js'
 import { resolveScopeLayout, resolveScopePresentation } from '../../utils/scopeListLayout.js'
-import { orderToSortKeys, sameSortKeys } from '../../utils/sortOrder.js'
+import { orderToSortKeys } from '../../utils/sortOrder.js'
 import { dispatchObjectCreated } from '../../utils/walkthroughSignals.js'
 import { CnActionButtons } from '../CnActionButtons/index.js'
 import { CnActionsBar } from '../CnActionsBar/index.js'
@@ -1350,7 +1371,7 @@ import { orderColumns, personalColumnsKey, reconcilePersonalColumns } from './pe
 import { createSelfModeActions, resolveRowTarget } from './selfModeActions.js'
 import { applyRowPatches, normalisePaneWidth, rowIdOf, splitLayoutFor } from './splitView.js'
 import { useNamedSource } from './useNamedSource.js'
-import { BOARD_PAGE_SIZE, useSelfFetchList } from './useSelfFetchList.js'
+import { BOARD_PAGE_SIZE, resolveInitialQuickFilterIndex, useSelfFetchList } from './useSelfFetchList.js'
 
 /** Rows fetched for one month in calendar mode. */
 const CALENDAR_PAGE_SIZE = 200
@@ -1934,6 +1955,20 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Board look: the record layout of each card in the cards view
+		 * (manifest key `config.cardLayout`): `{ headPill, number, title,
+		 * meta, footerPill, footerDate }`, each part naming a field. See
+		 * CnObjectCard `layout`.
+		 *
+		 * @type {object}
+		 * @spec openspec/changes/board-record-card-layout/specs/board-record-card-layout/spec.md#requirement-a-board-card-can-draw-the-record-layout-from-config
+		 */
+		cardLayout: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * Gives each card in the card view a status accent: a colored start
 		 * border and icon. See CnObjectCard `accent`.
@@ -2157,13 +2192,15 @@ export default {
 		 * the Filter button and the view switch, in whatever width that row has
 		 * beside a side panel (DqTeamwachtrij): the chips take the room the
 		 * buttons leave, and those that do not fit move into the overflow chip.
+		 * `'row'` puts them on a row of their own above the toolbar, wrapping
+		 * onto more lines instead of folding into the overflow chip.
 		 *
-		 * @type {''|'toolbar'}
+		 * @type {''|'toolbar'|'row'}
 		 */
 		quickFilterPlacement: {
 			type: String,
 			default: '',
-			validator: (v) => ['', 'toolbar'].includes(v),
+			validator: (v) => ['', 'toolbar', 'row'].includes(v),
 		},
 
 		/**
@@ -3197,9 +3234,11 @@ export default {
 		},
 
 		/**
-		 * Show a standalone sort dropdown in the actions bar (for card/list
-		 * views without sortable headers). Emits `@sort-change` with the value.
-		 * Fed from the manifest as `pages[].config.showSortSelect`.
+		 * Deprecated, without effect: the toolbar draws no sort select. The
+		 * table sorts by its column headers, the list, card and map views by
+		 * the Sort section in the index sidebar.
+		 *
+		 * @deprecated
 		 */
 		showSortSelect: {
 			type: Boolean,
@@ -3207,7 +3246,11 @@ export default {
 		},
 
 		/**
-		 * Options for the standalone sort dropdown (manifest `config.sortSelectOptions`).
+		 * The orders the index sidebar's Sort section offers in the list, card
+		 * and map views (manifest `config.sortSelectOptions`): `{ value, label,
+		 * order? }`, the order its `order` (an `orderToSortKeys` form) or its
+		 * `value` read as one. Without them the section offers the sortable
+		 * columns.
 		 *
 		 * @type {Array<{ value: string, label: string }>}
 		 */
@@ -3217,8 +3260,10 @@ export default {
 		},
 
 		/**
-		 * Selected value of the standalone sort dropdown. Empty lets a
-		 * self-fetch page show the option matching its current order.
+		 * Deprecated, without effect: the toolbar sort select is gone; the
+		 * Sort section in the index sidebar shows the current order.
+		 *
+		 * @deprecated
 		 */
 		sortSelectValue: {
 			type: String,
@@ -3271,6 +3316,9 @@ export default {
 		 *   defaults to `field`).
 		 * - `folders` — explicit folder list for `source:'custom'`.
 		 * - `allLabel` / `title` / `allowCreate` — passed to CnFolderSidebar.
+		 * - `scopeViews` — the view modes the scope's look (columns, title,
+		 *   count line and the other scope keys) applies in, e.g. `["table",
+		 *   "list"]`; other views keep the page's own look. Default: every view.
 		 * - `pane` — `false` draws no pane: the scope still comes from the
 		 *   deep-link filter (`?caseType=<id>`) and still applies its look, as
 		 *   a list narrowed to one case type does without a folder column.
@@ -5002,22 +5050,45 @@ export default {
 		},
 
 		/**
-		 * The sort select's shown value: `sortSelectValue` when the host
-		 * controls it, else on a self-fetch page the option whose order is the
-		 * list's current order (a header click that matches one shows it).
+		 * The list's current order, `[{ key, order }]`: the self-fetched list's,
+		 * else the `sortKeys` / `sortKey` props.
 		 *
-		 * @return {string} The option value, or '' when none matches.
+		 * @return {Array<{key: string, order: string}>} The order.
 		 */
-		effectiveSortSelectValue() {
-			if (this.sortSelectValue) {
-				return this.sortSelectValue
+		currentSortKeys() {
+			if (this.isSelfFetchMode && this.list && this.list.sortKeys) {
+				return this.list.sortKeys.value || []
 			}
-			if (!this.isSelfFetchMode || !this.list || !this.list.sortKeys) {
-				return ''
+			if (Array.isArray(this.sortKeys) && this.sortKeys.length > 0) {
+				return this.sortKeys
 			}
-			const current = this.list.sortKeys.value || []
-			const match = (this.sortSelectOptions || []).find((o) => o && sameSortKeys(this.sortSelectKeys(o), current))
-			return match ? match.value : ''
+			return this.sortKey ? [{ key: this.sortKey, order: this.sortOrder || 'asc' }] : []
+		},
+
+		/**
+		 * The orders the index sidebar's Sort section offers: none in the table
+		 * view, which sorts by its column headers; else `sortSelectOptions`,
+		 * or else the sortable columns, ascending.
+		 *
+		 * @return {Array<{value: string, label: string, keys: Array<{key: string, order: string}>}>} The options.
+		 */
+		sidebarSortOptions() {
+			if (this.currentViewMode === 'table') {
+				return []
+			}
+			if (Array.isArray(this.sortSelectOptions) && this.sortSelectOptions.length > 0) {
+				return this.sortSelectOptions
+					.filter((o) => o && o.value !== undefined && o.value !== null)
+					.map((o) => ({
+						value: String(o.value),
+						label: this.cnTranslate(o.label || String(o.value)),
+						keys: orderToSortKeys(o.order !== undefined ? o.order : o.value),
+					}))
+					.filter((o) => o.keys.length > 0)
+			}
+			return (this.tableColumns || [])
+				.filter((c) => c && typeof c === 'object' && c.key && isColumnSortable(c, this.effectiveSchema))
+				.map((c) => ({ value: c.key, label: this.cnTranslate(c.label || c.key), keys: [{ key: c.key, order: 'asc' }] }))
 		},
 
 		/**
@@ -5049,7 +5120,7 @@ export default {
 		 * @spec openspec/changes/index-columns-per-scope/specs/index-page/spec.md
 		 */
 		activeScopeLayout() {
-			if (!this.folderSidebar) {
+			if (!this.folderSidebar || !this.scopeShapesView) {
 				return { columns: null, sortKeys: [], searchFields: [] }
 			}
 			return resolveScopeLayout({
@@ -5059,6 +5130,23 @@ export default {
 			})
 		},
 
+		/**
+		 * Whether the active scope's look applies in the current view mode:
+		 * always, unless `folderSidebar.scopeViews` names the view modes it is
+		 * for (`["table", "list"]`), so the board keeps the page's generic
+		 * look (DqWerkbord). The scope's filter applies in every view.
+		 *
+		 * @spec openspec/changes/index-scope-views/specs/index-page/spec.md#requirement-a-scope-look-can-be-limited-to-view-modes
+		 * @return {boolean}
+		 */
+		scopeShapesView() {
+			const views = this.folderSidebar && this.folderSidebar.scopeViews
+			if (!Array.isArray(views) || views.length === 0) {
+				return true
+			}
+			return views.includes(this.currentViewMode)
+		},
+
 		/**
 		 * This page's own value of each presentation key, which a query preset
 		 * may have set: what `presented()` falls back to without a scope.
@@ -5093,7 +5181,7 @@ export default {
 		 * @spec openspec/changes/index-scope-presentation/specs/index-page/spec.md#requirement-a-preset-or-a-scope-sets-the-list-s-presentation
 		 */
 		activeScopePresentation() {
-			if (!this.folderSidebar) {
+			if (!this.folderSidebar || !this.scopeShapesView) {
 				return {}
 			}
 			return resolveScopePresentation({ scope: this.activeScope, row: this.activeScopeRow })
@@ -5335,6 +5423,20 @@ export default {
 		 * @return {(Array<object>|null)} The tabs.
 		 * @spec openspec/changes/working-list-row-actions/specs/index-page/spec.md
 		 */
+		/**
+		 * The chip the strip lights: the active tab, else the default tab of
+		 * tabs that arrived after setup (`quickFiltersFrom`), which is the
+		 * one the fetch applies.
+		 *
+		 * @return {number|null} The tab index, or null without tabs.
+		 */
+		shownQuickFilterIndex() {
+			if (this.activeQuickFilterIndex !== null && this.activeQuickFilterIndex !== undefined) {
+				return this.activeQuickFilterIndex
+			}
+			return this.quickFilterMultiple ? null : resolveInitialQuickFilterIndex(this.tabStripEntries)
+		},
+
 		tabStripEntries() {
 			if (this.lensTabs.length > 0) {
 				return this.lensTabs
@@ -5561,6 +5663,22 @@ export default {
 			return specs
 		},
 
+		/**
+		 * The rendered columns by key, so a card fact shows what its table
+		 * cell shows (label, formatter, widget).
+		 *
+		 * @return {object} Column definitions keyed by property.
+		 */
+		cardFieldColumns() {
+			const byKey = {}
+			for (const col of this.renderedColumns || []) {
+				if (col && typeof col === 'object' && typeof col.key === 'string') {
+					byKey[col.key] = col
+				}
+			}
+			return byKey
+		},
+
 		/**
 		 * The property keys the board look's card facts show: the page's
 		 * `cardFields`, else the first four list columns. Null without the
@@ -6410,8 +6528,11 @@ export default {
 
 			const present = new Set(cols.map((c) => (typeof c === 'string' ? c : c.key)))
 			const byKey = new Map(this.governedColumns.map((c) => [c.key, c]))
+			// A scope that sets its own columns does not get its folder field back:
+			// every row of the scope holds the same value there.
+			const scopeField = this.activeScopeLayout.columns ? this.folderFilterKey : ''
 			visible.forEach((key) => {
-				if (present.has(key)) {
+				if (present.has(key) || key === scopeField) {
 					return
 				}
 				const def = byKey.get(key)
@@ -6886,6 +7007,28 @@ export default {
 			return count > 0 ? `${name}, ${t('nextcloud-vue', '{count} active', { count })}` : name
 		},
 
+		/** @return {string} The field the folder sidebar filters by, or ''. */
+		folderFilterKey() {
+			return (this.folderSidebar && (this.folderSidebar.filterField || this.folderSidebar.field)) || ''
+		},
+
+		/**
+		 * The filters the table's header filters show: every active filter but
+		 * the selected folder's own, which the Active chip already names, so
+		 * the table draws no summary chip for it.
+		 *
+		 * @return {object} The filters.
+		 */
+		tableActiveFilters() {
+			const filters = this.effectiveActiveFilters || {}
+			const key = this.folderFilterKey
+			if (!key || this.selectedFolderId === null || this.selectedFolderId === undefined || !Object.hasOwn(filters, key)) {
+				return filters
+			}
+			const { [key]: _folder, ...rest } = filters
+			return rest
+		},
+
 		/**
 		 * The active filters as chips for the board toolbar's second row, one
 		 * per filter: "Team: Woo". A filter with no value is not active.
@@ -7289,6 +7432,8 @@ export default {
 				showMetadata: this.resolvedSidebar.showMetadata !== false,
 				personalColumns: this.personalColumns,
 				pinnedCount: this.pinnedColumnCount,
+				sortOptions: this.sidebarSortOptions,
+				currentSort: this.currentSortKeys,
 				...this.sidebarSearchProps,
 			}
 		},
@@ -8761,35 +8906,18 @@ export default {
 		},
 
 		/**
-		 * The sort keys a sort-select option stands for: its `order` (any
-		 * `orderToSortKeys` form), else its `value` read as an order.
-		 *
-		 * @param {object} option A `sortSelectOptions` entry.
-		 * @return {Array<{key: string, order: string}>} The sort keys.
-		 */
-		sortSelectKeys(option) {
-			if (!option) {
-				return []
-			}
-			return orderToSortKeys(option.order !== undefined ? option.order : option.value)
-		},
-
-		/**
-		 * A choice in the sort select. On a self-fetch page it orders the list
-		 * as a header click does (`_order`, kept in the address); every page
-		 * also emits `sort-change` with the value.
+		 * An order chosen in the index sidebar's Sort section. It goes the way
+		 * a header click goes: the self-fetched list sorts (`_order`, kept in
+		 * the address), and `sort` is emitted for a host that sorts itself.
 		 *
-		 * @param {string} value The chosen option's value.
+		 * @param {Array<{key: string, order: string}>} keys The chosen order.
 		 * @return {void}
 		 */
-		onSortSelectChange(value) {
-			const option = (this.sortSelectOptions || []).find((o) => o && o.value === value)
-			const keys = this.sortSelectKeys(option)
-			if (option && keys.length > 0 && this.isSelfFetchMode && typeof this.list.onSort === 'function') {
-				this.list.onSort({ key: keys[0].key, order: keys[0].order, keys })
-				this.persistViewStateToRoute(this.currentViewState())
+		onSidebarSortChange(keys) {
+			if (!Array.isArray(keys) || keys.length === 0) {
+				return
 			}
-			this.$emit('sort-change', value)
+			this.onSortEvent({ key: keys[0].key, order: keys[0].order, keys })
 		},
 
 		/**
@@ -9977,6 +10105,7 @@ export default {
 					'columns-reset': () => this.onColumnsReset(),
 					'filter-change': (event) => this.onFilterEvent(event),
 					'clear-filters': () => this.onClearFilters(),
+					'sort-change': (keys) => this.onSidebarSortChange(keys),
 				},
 			}
 		},