@conduction/nextcloud-vue 2.102.0 → 2.103.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.102.0",
+  "version": "2.103.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/src/components/CnConversationThread/CnConversationThread.md

@@ -23,6 +23,23 @@ Read-only, for a closed record:
   ]" />
 ```
 
+Channel chips and a header action. `channel-filter` draws All plus a chip per channel with its count, `channels` lists labels that always get a chip, and the `header-actions` slot puts buttons beside the title:
+
+```vue
+<CnConversationThread
+  title="Contact"
+  channel-filter
+  :channels="['E-mail', 'Letter']"
+  :messages="[
+    { id: 1, author: 'Sanne de Vries', side: 'them', channel: 'E-mail', text: 'Could I see the documents?' },
+    { id: 2, side: 'us', channel: 'E-mail', text: 'They are on their way.' },
+  ]">
+  <template #header-actions>
+    <NcButton>Log contact</NcButton>
+  </template>
+</CnConversationThread>
+```
+
 No messages yet:
 
 ```vue

package/src/components/CnConversationThread/CnConversationThread.vue

@@ -9,13 +9,27 @@
 		data-testid="cn-conversation-thread"
 		:aria-labelledby="title ? titleId : null"
 		:aria-label="title ? null : fallbackLabel">
-		<component
-			:is="titleTag"
-			v-if="title"
-			:id="titleId"
-			class="cn-conversation-thread__title">
-			{{ title }}
-		</component>
+		<div v-if="title || $slots['header-actions']" class="cn-conversation-thread__header">
+			<component
+				:is="titleTag"
+				v-if="title"
+				:id="titleId"
+				class="cn-conversation-thread__title">
+				{{ title }}
+			</component>
+			<div v-if="$slots['header-actions']" class="cn-conversation-thread__header-actions">
+				<!-- @slot header-actions Buttons beside the title, for example "Log contact". -->
+				<slot name="header-actions" />
+			</div>
+		</div>
+
+		<CnQuickFilterBar
+			v-if="channelChips.length > 0"
+			inline
+			class="cn-conversation-thread__channels"
+			:tabs="channelChips"
+			:activeIndex="activeChannelIndex"
+			@update:activeIndex="onChannelChip" />
 
 		<p v-if="loading && rows.length === 0"
 			class="cn-conversation-thread__empty"
@@ -27,9 +41,13 @@
 			{{ emptyText }}
 		</p>
 
+		<p v-else-if="shownRows.length === 0" class="cn-conversation-thread__empty" data-testid="cn-conversation-channel-empty">
+			{{ emptyText }}
+		</p>
+
 		<ol v-else class="cn-conversation-thread__messages">
 			<li
-				v-for="row in rows"
+				v-for="row in shownRows"
 				:key="row.key"
 				class="cn-conversation-thread__message"
 				:class="`cn-conversation-thread__message--${row.side}`"
@@ -93,6 +111,7 @@
 import axios from '@nextcloud/axios'
 import { translate as t } from '@nextcloud/l10n'
 import { NcButton } from '@nextcloud/vue'
+import CnQuickFilterBar from '../CnQuickFilterBar/CnQuickFilterBar.vue'
 import { prefixUrl } from '../../utils/headers.js'
 import { userLocale } from '../../utils/userLocale.js'
 
@@ -126,6 +145,7 @@ export default {
 	name: 'CnConversationThread',
 
 	components: {
+		CnQuickFilterBar,
 		NcButton,
 	},
 
@@ -204,6 +224,24 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Draw channel chips above the messages: All, then one per channel
+		 * with its count. Choosing one shows only that channel's messages.
+		 */
+		channelFilter: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Channel labels that always get a chip, in this order, also when no
+		 * message uses them yet. Channels the messages use follow.
+		 */
+		channels: {
+			type: Array,
+			default: () => [],
+		},
+
 		/** Shown when there are no messages yet. */
 		emptyText: {
 			type: String,
@@ -224,6 +262,8 @@ export default {
 		conversationThreadUid += 1
 		return {
 			draft: '',
+			/** The channel the chips narrow the thread to; '' is All. */
+			activeChannel: '',
 			sending: false,
 			errorMessage: '',
 			titleId: `cn-conversation-title-${conversationThreadUid}`,
@@ -262,6 +302,47 @@ export default {
 				})
 		},
 
+		/**
+		 * The channel labels with a chip: the declared ones, then the ones
+		 * the messages use.
+		 *
+		 * @return {Array<string>} The labels, each once.
+		 */
+		channelLabels() {
+			const declared = (Array.isArray(this.channels) ? this.channels : []).filter((label) => typeof label === 'string' && label !== '')
+			return [...new Set([...declared, ...this.rows.map((row) => row.channel).filter(Boolean)])]
+		},
+
+		/**
+		 * The chips: All, then each channel, each with its count. Empty
+		 * without `channelFilter` or without channels.
+		 *
+		 * @return {Array<{label: string, count: number}>} The chips.
+		 */
+		channelChips() {
+			if (!this.channelFilter || this.channelLabels.length === 0) {
+				return []
+			}
+			return [
+				{ label: t('nextcloud-vue', 'All'), count: this.rows.length },
+				...this.channelLabels.map((label) => ({ label, count: this.rows.filter((row) => row.channel === label).length })),
+			]
+		},
+
+		/** @return {number} The pressed chip: 0 for All. */
+		activeChannelIndex() {
+			const index = this.channelLabels.indexOf(this.activeChannel)
+			return index < 0 ? 0 : index + 1
+		},
+
+		/** @return {Array<object>} The rows on the chosen channel, or all of them. */
+		shownRows() {
+			if (this.channelChips.length === 0 || this.activeChannelIndex === 0) {
+				return this.rows
+			}
+			return this.rows.filter((row) => row.channel === this.activeChannel)
+		},
+
 		/**
 		 * Whether there is something to send and nothing in flight.
 		 *
@@ -289,6 +370,16 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Narrow the thread to the chip's channel; the All chip (0) clears it.
+		 *
+		 * @param {number|null} index The chip index.
+		 * @return {void}
+		 */
+		onChannelChip(index) {
+			this.activeChannel = index > 0 ? (this.channelLabels[index - 1] || '') : ''
+		},
+
 		/**
 		 * Up to two initials of a name, for the avatar.
 		 *
@@ -370,6 +461,20 @@ export default {
 	gap: calc(3.5 * var(--default-grid-baseline));
 }
 
+.cn-conversation-thread__header {
+	align-items: flex-start;
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(3 * var(--default-grid-baseline));
+	justify-content: space-between;
+}
+
+.cn-conversation-thread__header-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(2 * var(--default-grid-baseline));
+}
+
 .cn-conversation-thread__title {
 	font-size: 1.1em;
 	font-weight: 700;

package/src/components/CnConversationThread/CnConversationWidget.vue

@@ -15,12 +15,27 @@
 			:endpoint="replyAction ? '' : endpoint"
 			:loading="loading"
 			:emptyText="content.emptyText ? tr(content.emptyText) : undefined"
+			:channelFilter="content.channelChips === true"
+			:channels="channelLabels"
 			@send="onSend"
-			@sent="onSent" />
+			@sent="onSent">
+			<template v-if="headerAction" #header-actions>
+				<NcButton
+					data-testid="cn-conversation-header-action"
+					@click="onHeaderAction">
+					<template v-if="headerAction.icon" #icon>
+						<CnIcon :name="headerAction.icon" :size="20" />
+					</template>
+					{{ tr(headerAction.label) }}
+				</NcButton>
+			</template>
+		</CnConversationThread>
 	</div>
 </template>
 
 <script>
+import { NcButton } from '@nextcloud/vue'
+import CnIcon from '../CnIcon/CnIcon.vue'
 import CnConversationThread from './CnConversationThread.vue'
 import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { fetchReferenceObjects } from '../../utils/boardReferenceColumns.js'
@@ -45,12 +60,20 @@ import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveF
  * `replyAction`, an action descriptor the app decides the meaning of: it is
  * dispatched with `args: [{ text, objectId }]` and `props.text`. After a send
  * the source is read again.
+ *
+ * `channelChips: true` draws a chip per channel above the thread (every
+ * `channelMap` label, in map order, then any other channel a message uses).
+ * `headerAction` is a button beside the title (`{ label, icon?, ...action }`,
+ * DqZaakContact's "Contact vastleggen"), dispatched like `replyAction` with
+ * `args: [{ objectId }]`; after it the source is read again.
  */
 export default {
 	name: 'CnConversationWidget',
 
 	components: {
 		CnConversationThread,
+		CnIcon,
+		NcButton,
 	},
 
 	inject: {
@@ -102,6 +125,18 @@ export default {
 			return source && typeof source === 'object' && source.register && source.schema ? source : null
 		},
 
+		/** @return {object|null} The header action, or null without a label. */
+		headerAction() {
+			const action = this.content?.headerAction
+			return action && typeof action === 'object' && typeof action.label === 'string' && action.label !== '' ? action : null
+		},
+
+		/** @return {Array<string>} The `channelMap` labels, translated, each once. */
+		channelLabels() {
+			const map = this.content?.channelMap && typeof this.content.channelMap === 'object' ? this.content.channelMap : {}
+			return [...new Set(Object.values(map).filter((label) => typeof label === 'string' && label !== '').map((label) => this.tr(label)))]
+		},
+
 		/** @return {object|null} The reply action, or null. */
 		replyAction() {
 			const action = this.content?.replyAction
@@ -254,6 +289,30 @@ export default {
 			this.onSent({ text })
 		},
 
+		/**
+		 * Run `headerAction` with the record id, then read the source again.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async onHeaderAction() {
+			if (!this.headerAction) {
+				return
+			}
+			const { label, icon, ...rest } = resolveDeepTokens(this.headerAction, this.tokenCtx)
+			const action = { ...rest, args: [{ objectId: this.objectId }] }
+			try {
+				const outcome = await (typeof this.cnDispatchAction === 'function'
+					? this.cnDispatchAction(action)
+					: dispatchAction(action, { router: this.$router || null }))
+				if (outcome === false) {
+					return
+				}
+			} catch {
+				return
+			}
+			await this.loadSource()
+		},
+
 		/**
 		 * Show an accepted reply at once, without waiting for the record.
 		 *

package/src/components/CnDashboardPage/CnDashboardPage.md

@@ -126,12 +126,15 @@ predicate's field value into their text wherever it says `{value}` (e.g.
 | `gridMargin` | Number | `12` | Grid margin (gutter) in pixels between widgets |
 | `emptyLabel` | String | `'No widgets configured'` | Text shown in the empty state when `layout` is empty |
 | `unavailableLabel` | String | `'Widget not available'` | Text shown for unknown or unavailable widgets |
-| `userLayout` | Boolean | `false` | Keep a per-user arrangement of this page. Off by default: a page without it makes **no** layout request and renders exactly as before. |
+| `userLayout` | Boolean | `false` | **Deprecated** (layout belongs to Buildiq; removed after this release). Keep a per-user arrangement of this page. Off by default: a page without it makes **no** layout request and renders exactly as before. |
 | `appId` | String | `''` | The Nextcloud app the user layout is stored under. Required for `userLayout` to do anything. |
 | `userLayoutStore` | Object | `null` | A store exposing `loadDashboardLayout` / `saveDashboardLayout` / `resetDashboardLayout`, usually one carrying [`dashboardLayoutsPlugin`](../../../docs/store/plugins/dashboard-layouts.md). Left unset, the page reads and writes user preferences directly. |
 
 ## Per-user layout
 
+> **Deprecated: layout belongs to Buildiq.** Arranging a page is Buildiq's job (Ruben, 18 Oct 2026): its **Indeling aanpassen** edits the layout everybody sees. `userLayout` still works for this release and will be removed after it. While Buildiq edits the page (`cnEditingBody`), the grid shows the manifest layout, and a drag or resize goes into the manifest Buildiq saves, also on a page with `userLayout`. A user arrangement made outside an in-page edit session is saved at once, because no **Done** follows to save it.
+
+
 With `userLayout: true` and an `appId`, this page loads the current user's arrangement before the first grid render and merges it over the manifest layout. The rules are [`mergeUserLayout`](../../../docs/utilities/merge-user-layout.md)'s: **the manifest decides which widgets exist, the user decides where they sit.**
 
 ```vue

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -1839,6 +1839,9 @@ export default {
 		 * and renders exactly as it did before this existed, which is the
 		 * property that makes shipping it safe on every dashboard at once.
 		 *
+		 * Deprecated: layout belongs to Buildiq. Kept working for one release.
+		 *
+		 * @deprecated
 		 * @type {boolean}
 		 */
 		userLayout: {
@@ -2216,9 +2219,25 @@ export default {
 		 * @return {boolean}
 		 */
 		gridEditable() {
+			return this.isEditing || this.editingBody
+		},
+
+		/**
+		 * Whether Buildiq is editing the page (the injected `cnEditingBody`
+		 * ref, or a plain boolean). Buildiq is the layout editor: while it
+		 * edits, the grid shows and changes the manifest layout, also on a
+		 * page with `userLayout`.
+		 *
+		 * @return {boolean}
+		 */
+		editingBody() {
 			const e = this.cnEditingBody
-			const buildiqEditing = Boolean(e && typeof e === 'object' && 'value' in e ? e.value : e)
-			return this.isEditing || buildiqEditing
+			return Boolean(e && typeof e === 'object' && 'value' in e ? e.value : e)
+		},
+
+		/** @return {boolean} Whether the grid shows this user's arrangement. */
+		showsUserLayout() {
+			return this.userLayout && !this.editingBody && Array.isArray(this.userLayoutItems)
 		},
 
 		/**
@@ -2279,9 +2298,7 @@ export default {
 		 * @return {Array<object>} The layout.
 		 */
 		renderedLayout() {
-			const base = (this.userLayout && Array.isArray(this.userLayoutItems))
-				? this.userLayoutItems
-				: this.layout
+			const base = this.showsUserLayout ? this.userLayoutItems : this.layout
 			// The KPI row is not part of the grid.
 			if (Array.isArray(this.kpiRow) && this.kpiRow.length > 0 && Array.isArray(base)) {
 				return base.filter((item) => !this.kpiRow.includes(item.widgetId))
@@ -3577,7 +3594,8 @@ export default {
 			// write below is for the admin editor, which edits the page for
 			// everybody; doing it for a user rearranging their own dashboard
 			// would rewrite the page for everyone who opens it after them.
-			if (this.userLayout && Array.isArray(this.userLayoutItems)) {
+			// While Buildiq edits, the drag is the admin's and goes below.
+			if (this.showsUserLayout) {
 				this.userLayoutDirty = true
 				this.userLayoutItems = this.userLayoutItems.map((item) => {
 					const u = (Array.isArray(updated) ? updated : []).find((candidate) => String(candidate.id) === String(item.id)
@@ -3586,6 +3604,11 @@ export default {
 					return (u ? { ...item, ...this.geometryFrom(u) } : item)
 				})
 				this.$emit('layout-change', this.userLayoutItems)
+				// Outside an in-page edit session no Done will come to save
+				// the arrangement, so it is saved now.
+				if (!this.isEditing) {
+					this.saveUserLayout()
+				}
 
 				return
 			}

package/src/components/CnDetailPage/CnDetailPage.md

@@ -215,7 +215,7 @@ export default {
 
 | 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). |
+| `userLayout` | Boolean | `false` | **Deprecated** (layout belongs to Buildiq; removed after this release). 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
 

package/src/components/CnFormDialog/CnFormDialog.md

@@ -100,7 +100,7 @@ export default {
 | `lockedFields` | `[]` | Field keys rendered read-only (disabled) and immutable — typically the parent reference seeded via `initialData` so the user can't repoint a child away from the record it was created under. |
 | `excludeFields` | `[]` | Array of field keys to exclude from the auto-generated form. |
 | `includeFields` | `null` | Array of field keys to include (whitelist mode). Null means all fields. |
-| `fieldOverrides` | `{}` | Per-field override objects passed to `fieldsFromSchema`. |
+| `fieldOverrides` | `{}` | Per-field override objects passed to `fieldsFromSchema`. A `widget` that names a registered component (v2 registry, then `customComponents`) mounts it as the field's control, with `value`/`modelValue`, `field`, `error` and `disabled`, writing back on `input` or `update:modelValue`. |
 | `nameField` | `'title'` | Which field is the "name" of the item (used in result messages). |
 | `size` | `'normal'` | NcDialog size — `'small'`, `'normal'`, or `'large'`. |
 | `dynamicLoadingLabel` | `'Loading the fields this choice adds.'` | Text shown while the fields a chosen value brings with it are being fetched. See *Fields the data decides* below. |

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -131,6 +131,22 @@
 							:error="errors[field.key]"
 							:updateField="updateField" />
 
+						<!-- A `widget` naming a registered component (v2 registry or
+						     customComponents) mounts that component as the control.
+						     It gets `value`/`modelValue`, `field`, `error` and
+						     `disabled`, and writes back with `input` or
+						     `update:modelValue`. -->
+						<component
+							:is="resolveFieldComponent(field)"
+							v-else-if="resolveFieldComponent(field)"
+							:value="formData[field.key]"
+							:modelValue="formData[field.key]"
+							:field="field"
+							:error="errors[field.key] || ''"
+							:disabled="!!field.readOnly"
+							@input="value => updateField(field.key, value)"
+							@update:modelValue="value => updateField(field.key, value)" />
+
 						<!-- referenceType (AD-18): render the integration's
 						     single-entity widget instead of a plain input. -->
 						<component
@@ -314,8 +330,26 @@
 								     plain select. NcSelectUsers wraps NcSelect and merges the
 								     rest of these bindings through, so the async load, search
 								     and select machinery is unchanged either way. -->
+								<!-- `look: "search"` (a `fieldOverrides` key): a search field
+								     with rows of icon or initials, name, a secondary line from
+								     `optionSecondary` and a check on the chosen one
+								     (DqOverdragen "Nieuw team"). -->
+								<CnSearchSelect
+									v-if="field.look === 'search' && !isUserField(field)"
+									:inputId="'cn-form-' + field.key"
+									:inputLabel="fieldLabelText(field)"
+									:labelOutside="isBoardLook"
+									:options="searchSelectOptions(field)"
+									:modelValue="getEffectiveSelectedOption(field)"
+									:clearable="!field.required"
+									:disabled="field.readOnly"
+									:loading="isFieldLoading(field)"
+									:filterable="!isAsyncEnum(field)"
+									@update:modelValue="onSearchSelectChange(field, $event)"
+									@search="isAsyncEnum(field) ? onAsyncSearch(field, $event) : undefined" />
 								<component
 									:is="isUserField(field) ? 'NcSelectUsers' : 'NcSelect'"
+									v-else
 									v-cn-select-aria="fieldAria(field)"
 									:inputId="'cn-form-' + field.key"
 									:inputLabel="fieldLabelText(field)"
@@ -799,6 +833,7 @@ import CnIconBrowser from '../CnIconBrowser/CnIconBrowser.vue'
 import CnJsonViewer from '../CnJsonViewer/CnJsonViewer.vue'
 import CnPropertySourceField from '../CnPropertySourceField/CnPropertySourceField.vue'
 import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
+import CnSearchSelect from '../CnSearchSelect/CnSearchSelect.vue'
 import CnSubObjectsField from '../CnSubObjectsField/CnSubObjectsField.vue'
 import { describeRowProblem, useChildRecords } from '../../composables/useChildRecords.js'
 import { clearAnonymousDrafts, draftIndicatorText, draftKey, formDraftMixin, hasDraftChanges, readDraft, resolveDraftUserId } from '../../composables/useFormDraft.js'
@@ -821,6 +856,7 @@ import {
 	splitDynamicFormData,
 } from '../../utils/dynamicProperties.js'
 import { shouldShow } from '../../utils/fieldCondition.js'
+import { fillTemplate } from '../../utils/fillTemplate.js'
 import { computeAssignments } from '../../utils/formAssign.js'
 import { resolveNextcloudGroup, searchNextcloudGroups } from '../../utils/groupAutocomplete.js'
 import { durationSeconds } from '../../utils/isoDuration.js'
@@ -844,6 +880,36 @@ import { resolveNextcloudUser, searchNextcloudUsers } from '../../utils/userAuto
  */
 const WIDE_WIDGETS = ['textarea', 'json', 'code']
 
+// The widget names the form draws itself; a registered component cannot take one over.
+const BUILT_IN_WIDGETS = new Set([
+	'text',
+	'email',
+	'url',
+	'number',
+	'textarea',
+	'switch',
+	'select',
+	'user',
+	'group',
+	'multiselect',
+	'user-multiselect',
+	'group-multiselect',
+	'tags',
+	'checkbox',
+	'date',
+	'datetime',
+	'json',
+	'code',
+	'file',
+	'duration',
+	'child-records',
+	'sub-objects',
+	'property-source',
+	'icon',
+	'language',
+	'timezone',
+])
+
 /** Largest file carried inline in the saved payload; bigger ones upload after save. */
 const INLINE_FILE_CAP = 1024 * 1024
 
@@ -1033,6 +1099,7 @@ export default {
 		CnFileField,
 		CnDurationField,
 		CnPropertySourceField,
+		CnSearchSelect,
 		CnReplaceValuesDialog,
 		CnSubObjectsField,
 		CnChildRecordsField,
@@ -2029,6 +2096,28 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Resolve the registered component a field's `widget` names: the v2
+		 * registry (any entry with a `component`) first, then the legacy
+		 * customComponents map. Built-in widget names never resolve here.
+		 *
+		 * @param {object} field A resolved field descriptor.
+		 * @return {object|null} Vue component, or null.
+		 */
+		resolveFieldComponent(field) {
+			const name = field && field.widget
+			if (typeof name !== 'string' || name === '' || BUILT_IN_WIDGETS.has(name)) {
+				return null
+			}
+			const entry = this.cnRegistry && this.cnRegistry[name]
+			if (entry && entry.component) {
+				return entry.component
+			}
+			const legacy = this.cnCustomComponents && this.cnCustomComponents[name]
+			// A bare function in the legacy map is a handler, not a component.
+			return legacy && typeof legacy === 'object' ? legacy : null
+		},
+
 		/**
 		 * Resolve a field's reference integration widget, if any.
 		 * Returns the integration's single-entity widget component
@@ -4337,6 +4426,44 @@ export default {
 		 * @param {object} field The field definition
 		 * @return {Array}
 		 */
+		/**
+		 * The options of a `look: "search"` field as CnSearchSelect rows: each
+		 * option's own `secondary` / `icon` / `avatar`, else the field's
+		 * `optionSecondary` template (filled from the option), `optionIcon` and
+		 * `optionAvatar`.
+		 *
+		 * @spec openspec/changes/search-select-look/specs/search-select/spec.md#requirement-a-single-picker-can-take-the-search-look
+		 * @param {object} field The field definition.
+		 * @return {Array<object>}
+		 */
+		searchSelectOptions(field) {
+			const template = typeof field.optionSecondary === 'string' ? field.optionSecondary : ''
+			return this.getEffectiveOptions(field).map((option) => ({
+				...option,
+				secondary: option.secondary || (template ? fillTemplate(template, option).trim() : ''),
+				icon: option.icon || field.optionIcon || '',
+				avatar: option.avatar ?? (field.optionAvatar === true),
+			}))
+		},
+
+		/**
+		 * Pick the option a CnSearchSelect field emitted by its id, and hand
+		 * it to the select change handler.
+		 *
+		 * @spec openspec/changes/search-select-look/specs/search-select/spec.md#requirement-a-single-picker-can-take-the-search-look
+		 * @param {object} field The field definition.
+		 * @param {string|number|null} id The chosen option's id.
+		 */
+		onSearchSelectChange(field, id) {
+			if (id === null || id === undefined) {
+				this.onEffectiveSelectChange(field, null)
+				return
+			}
+			const option = this.searchSelectOptions(field).find((o) => String(o.id ?? o.value) === String(id)) || { id, label: String(id) }
+			const { secondary, icon, avatar, ...plain } = option
+			this.onEffectiveSelectChange(field, plain)
+		},
+
 		getEffectiveOptions(field) {
 			if (this.isAsyncEnum(field)) {
 				// TODO: restore to `this.asyncState[field.key]?.options || []` once on Vue 3 (buble doesn't support optional chaining)

package/src/components/CnIndexPage/CnIndexPage.md

@@ -1094,6 +1094,16 @@ Sources: `register` (fetch the folder list from an OpenRegister `register`/`sche
 }
 ```
 
+`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
+"folderSidebar": {
+  "source": "register", "register": "dossiq", "schema": "caseType",
+  "idField": "@self.uuid", "nameField": "title",
+  "filterField": "caseType", "pane": false
+}
+```
+
 ### A column set per folder
 
 A folder is also a scope. Give it `columns`, `defaultSort` or `searchFields`

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -660,11 +660,12 @@
 		</slot>
 
 		<!-- Body -->
-		<div class="cn-index-page__body" :class="{ 'cn-index-page__body--with-folders': folderSidebar }">
+		<div class="cn-index-page__body" :class="{ 'cn-index-page__body--with-folders': showsFolderPane }">
 			<!-- Optional folder navigation pane (opt-in via the `folderSidebar`
 			     config). Selecting a folder filters the list by the config's
-			     `filterField`; "All" clears it. -->
-			<div v-if="folderSidebar" class="cn-index-page__folder-pane">
+			     `filterField`; "All" clears it. `pane: false` keeps the scope
+			     from the deep link and draws no pane. -->
+			<div v-if="showsFolderPane" class="cn-index-page__folder-pane">
 				<CnFolderSidebar
 					:source="folderSidebarSource"
 					:folders="folderSidebarFolders"
@@ -3200,6 +3201,9 @@ export default {
 		 *   defaults to `field`).
 		 * - `folders` — explicit folder list for `source:'custom'`.
 		 * - `allLabel` / `title` / `allowCreate` — passed to CnFolderSidebar.
+		 * - `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.
 		 *
 		 * A folder entry is also a SCOPE: it may carry `columns`, `defaultSort`
 		 * and `searchFields`, and while it is selected the list is shown that
@@ -4833,6 +4837,17 @@ export default {
 			return { shown, total: Math.max(shown, Number(this.effectivePagination?.total || 0)) }
 		},
 
+		/**
+		 * Whether the folder pane is drawn: a `folderSidebar` without
+		 * `pane: false`.
+		 *
+		 * @spec openspec/changes/folder-sidebar-pane-off/specs/index-page/spec.md#requirement-a-folder-scope-without-a-pane
+		 * @return {boolean}
+		 */
+		showsFolderPane() {
+			return Boolean(this.folderSidebar) && this.folderSidebar.pane !== false
+		},
+
 		/**
 		 * The CnFolderSidebar source. A `register` source is fetched by this
 		 * component and handed to CnFolderSidebar as a `custom` folder list.