@conduction/nextcloud-vue 2.104.0 → 2.106.0

package/src/components/CnIndexPage/CnIndexPage.md

@@ -390,6 +390,7 @@ export default {
 | `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`. The field takes the place of the "Showing X of Y" counter unless `showCountWithSearch` is set. |
 | `search` | Boolean | `true` | `false` draws no inline search in the actions bar, also in the board look, which otherwise draws one on every index page (manifest: `config.search`). Wins over `inlineSearch`. |
+| `appConfig` | Object | `{}` | The app config `@config.<key>` tokens resolve against (manifest: `config.appConfig`), as on the dashboard and detail pages, merged over a config an ancestor provides on `cnAppConfig`. A quick filter's `filter` and its `label` / `activeLabel` take the token: `"Residence @config.municipality"` reads "Residence Zuiddrecht" (board DqContacten); the label is translated first, and a key the config does not hold leaves the token as written. |
 | `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`. |
 | `searchInFiles` | Boolean | `false` | "Also search inside files" switch beside the search box (manifest `config.searchInFiles`). On, a search with a term sends `_content_search=true`; rows found through a file show "Found in {file}" (`@self.matchedFile`). State kept in the route as `contentSearch=1`. Emits `content-search`. |
 | `searchPlaceholder` | String | `''` | Placeholder for the inline search field (manifest `config.searchPlaceholder`). |
@@ -415,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. |
@@ -878,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.
@@ -1096,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
@@ -1148,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,9 +1305,11 @@ 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'
+import { unwrapAppConfig } from '../../utils/formatMetric.js'
 import { buildExportUrl } from '../../utils/indexExportHelpers.js'
 import { lensUnavailableText } from '../../utils/lensAvailability.js'
 import { isModifiedClick, openRowTarget } from '../../utils/linkNavigation.js'
@@ -1310,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'
@@ -1349,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
@@ -1677,6 +1699,8 @@ export default {
 		cnCustomComponents: { default: () => ({}) },
 		/** The permissions the user holds, provided by CnAppRoot; for gated page tabs. */
 		cnPermissions: { default: () => [] },
+		/** The app config an ancestor provides, for `@config.<key>` in quick-filter labels. */
+		cnAppConfig: { default: null },
 		/** The app id CnAppRoot provides, for the plural form of `countSubtitle`. */
 		cnAppId: { default: '' },
 		/**
@@ -1931,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`.
@@ -2154,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),
 		},
 
 		/**
@@ -3133,6 +3173,19 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * The app config `@config.<key>` tokens resolve against, in quick-filter
+		 * filters and labels (`"Residence @config.municipality"`), as on the
+		 * dashboard and detail pages. Merged over a config an ancestor provides
+		 * on `cnAppConfig`. Manifest: `config.appConfig`.
+		 *
+		 * @type {object}
+		 */
+		appConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+
 		/**
 		 * Keep the "Showing X of Y" counter visible beside the inline search field,
 		 * after any `#after-search` controls (only relevant with `inlineSearch`,
@@ -3181,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,
@@ -3191,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 }>}
 		 */
@@ -3201,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,
@@ -3255,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.
@@ -4986,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' }] }))
 		},
 
 		/**
@@ -5033,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({
@@ -5043,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.
@@ -5077,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 })
@@ -5319,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
@@ -5545,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
@@ -6394,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)
@@ -6678,11 +6815,21 @@ export default {
 		effectiveQuickFilters() {
 			const own = withPersonalLenses(this.presented('quickFilters') || this.generatedQuickFilters, this.personalLenses)
 			if (own && own.length > 0) {
-				return own
+				return own.map((tab) => this.withConfigLabels(tab))
 			}
 			return (this.isNamedSource && this.namedQuickFilters) || null
 		},
 
+		/**
+		 * The app config `@config.<key>` tokens resolve against: the `appConfig`
+		 * prop over a config an ancestor provides.
+		 *
+		 * @return {object} The config.
+		 */
+		effectiveAppConfig() {
+			return { ...unwrapAppConfig(this.cnAppConfig), ...(this.appConfig || {}) }
+		},
+
 		/**
 		 * Whether the Add button renders. A named source that declares
 		 * `showAdd: false` suppresses it (a task is created by a flow, never
@@ -6860,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.
@@ -7263,6 +7432,8 @@ export default {
 				showMetadata: this.resolvedSidebar.showMetadata !== false,
 				personalColumns: this.personalColumns,
 				pinnedCount: this.pinnedColumnCount,
+				sortOptions: this.sidebarSortOptions,
+				currentSort: this.currentSortKeys,
 				...this.sidebarSearchProps,
 			}
 		},
@@ -8735,35 +8906,45 @@ export default {
 		},
 
 		/**
-		 * The sort keys a sort-select option stands for: its `order` (any
-		 * `orderToSortKeys` form), else its `value` read as an order.
+		 * 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 {object} option A `sortSelectOptions` entry.
-		 * @return {Array<{key: string, order: string}>} The sort keys.
+		 * @param {Array<{key: string, order: string}>} keys The chosen order.
+		 * @return {void}
 		 */
-		sortSelectKeys(option) {
-			if (!option) {
-				return []
+		onSidebarSortChange(keys) {
+			if (!Array.isArray(keys) || keys.length === 0) {
+				return
 			}
-			return orderToSortKeys(option.order !== undefined ? option.order : option.value)
+			this.onSortEvent({ key: keys[0].key, order: keys[0].order, keys })
 		},
 
 		/**
-		 * 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.
+		 * A quick filter with `@config.<key>` in its `label` or `activeLabel`
+		 * (`"Residence @config.municipality"`): the label translated first, then
+		 * each token replaced by its configured value. A key the config does
+		 * not hold leaves its token in place. Other tabs pass unchanged.
 		 *
-		 * @param {string} value The chosen option's value.
-		 * @return {void}
+		 * @param {object} tab A quick-filter tab.
+		 * @return {object} The tab, with its labels resolved.
 		 */
-		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())
+		withConfigLabels(tab) {
+			if (!tab || typeof tab !== 'object') {
+				return tab
 			}
-			this.$emit('sort-change', value)
+			const hasToken = (value) => typeof value === 'string' && value.includes('@config.')
+			if (!hasToken(tab.label) && !hasToken(tab.activeLabel)) {
+				return tab
+			}
+			const config = this.effectiveAppConfig
+			const fill = (value) => (hasToken(value)
+				? this.cnTranslate(value).replace(/@config\.([A-Za-z0-9_.-]*[A-Za-z0-9_])/g, (token, key) => {
+						const found = this.getByPath(config, key)
+						return found === undefined || found === null || found === '' ? token : String(found)
+					})
+				: value)
+			return { ...tab, label: fill(tab.label), activeLabel: fill(tab.activeLabel) }
 		},
 
 		/**
@@ -9924,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),
 				},
 			}
 		},

package/src/components/CnIndexPage/CnIndexPageWidgets.vue

@@ -30,11 +30,15 @@
 				:showRefresh="false"
 				:headerLink="entry.headerLink"
 				:flush="variant === 'stat-row'">
+				<template v-if="headerNotes[entry.id]" #actions>
+					<span class="cn-index-page-widgets__note" data-testid="cn-index-page-widget-note">{{ headerNotes[entry.id] }}</span>
+				</template>
 				<component
 					:is="entry.renderer"
 					:widgetId="entry.id"
 					:content="entry.content"
-					v-bind="declaredContent(entry)" />
+					v-bind="declaredContent(entry)"
+					@header="onHeader(entry.id, $event)" />
 			</CnWidgetWrapper>
 		</div>
 	</component>
@@ -85,6 +89,13 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			/** The header note each widget reported (`header` event), by widget id. */
+			headerNotes: {},
+		}
+	},
+
 	computed: {
 		/**
 		 * The renderable entries, in the listed order.
@@ -122,6 +133,23 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Keep the header note a widget reports ("4 van 5 aanwezig"); only a
+		 * changed note is stored, so a report on render does not loop.
+		 *
+		 * @param {string} id The widget id.
+		 * @param {object} header `{ note?, link? }` from the widget.
+		 * @return {void}
+		 * @spec openspec/changes/side-panel-header-note/specs/side-panel-header-note/spec.md#requirement-a-side-panel-card-shows-the-note-its-widget-reports
+		 */
+		onHeader(id, header) {
+			const note = header && typeof header === 'object' && typeof header.note === 'string' ? header.note : ''
+			if ((this.headerNotes[id] || '') === note) {
+				return
+			}
+			this.headerNotes = { ...this.headerNotes, [id]: note }
+		},
+
 		/**
 		 * The content keys an entry's renderer declares as props. An undeclared
 		 * key would fall through onto the renderer's root; the whole content
@@ -158,6 +186,13 @@ export default {
 </script>
 
 <style scoped>
+.cn-index-page-widgets__note {
+	align-self: center;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	white-space: nowrap;
+}
+
 .cn-index-page-widgets--stat-row {
 	margin-bottom: var(--cn-board-section-gap, 20px);
 }