@conduction/nextcloud-vue 2.56.0-beta.30 → 2.56.0-beta.31

package/src/components/CnFilesBrowser/filesBrowser.js

@@ -220,3 +220,103 @@ export async function resolveObjectFolderInfo({ apiBase, register, schema, objec
 		return null
 	}
 }
+
+/**
+ * Read a dotted path off a value without throwing on a missing segment.
+ *
+ * @param {(Array|object|string|number|boolean|null|undefined)} value The value.
+ * @param {string} path A dotted path; empty answers the value itself.
+ * @return {(Array|object|string|number|boolean|null|undefined)} What sits at the path, or undefined.
+ */
+function readPath(value, path) {
+	if (typeof path !== 'string' || path === '') {
+		return value
+	}
+	return path.split('.').reduce((acc, key) => (acc === null || acc === undefined ? undefined : acc[key]), value)
+}
+
+/**
+ * Turn a host endpoint's answer into the browser's `rowData`: the host's own
+ * record for each file, keyed by file id.
+ *
+ * The answer may be a list of records (directly, at `path`, or under `items`
+ * or `results`), each naming its file in `key` (`fileId` unless the host says
+ * otherwise); a record without one is skipped. An object that is not a list
+ * and holds neither is taken as already keyed by file id. Anything else is
+ * an empty map: the extra columns stay empty, the files still list.
+ *
+ * @param {(Array|object|string|number|boolean|null|undefined)} data The endpoint answer.
+ * @param {object} [options] Where to look.
+ * @param {string} [options.path] A dotted path to the list in the answer.
+ * @param {string} [options.key] The record field that holds the file id.
+ * @return {object} The records by file id.
+ */
+export function indexRowData(data, { path = '', key = 'fileId' } = {}) {
+	let picked = readPath(data, path)
+	if (picked && typeof picked === 'object' && !Array.isArray(picked)) {
+		if (Array.isArray(picked.items)) {
+			picked = picked.items
+		} else if (Array.isArray(picked.results)) {
+			picked = picked.results
+		} else {
+			return { ...picked }
+		}
+	}
+	if (!Array.isArray(picked)) {
+		return {}
+	}
+	const byId = {}
+	picked.forEach((record) => {
+		if (!record || typeof record !== 'object') {
+			return
+		}
+		const id = record[key]
+		if (id === null || id === undefined || id === '') {
+			return
+		}
+		byId[String(id)] = record
+	})
+	return byId
+}
+
+/**
+ * Whether a host row action is offered on a file, by its `visibleIf`.
+ *
+ * `visibleIf.extension` lists file extensions (no case, a leading dot is
+ * allowed); `visibleIf.mime` lists mime types, where one ending in `/` or
+ * `/*` names the whole family. Every condition named must hold. An action
+ * without `visibleIf` is offered on every file, as before.
+ *
+ * @param {object} action The declared action.
+ * @param {object} node The file (`basename`, `mime`).
+ * @return {boolean} True when the action belongs on this file.
+ */
+export function hostActionApplies(action, node) {
+	const condition = action && action.visibleIf
+	if (!condition || typeof condition !== 'object') {
+		return true
+	}
+	if (Array.isArray(condition.extension)) {
+		const name = String((node && node.basename) || '')
+		const dot = name.lastIndexOf('.')
+		const extension = dot > 0 ? name.slice(dot + 1).toLowerCase() : ''
+		const wanted = condition.extension.map((entry) => String(entry).replace(/^\./, '').toLowerCase())
+		if (extension === '' || !wanted.includes(extension)) {
+			return false
+		}
+	}
+	if (Array.isArray(condition.mime)) {
+		const mime = String((node && node.mime) || '').toLowerCase()
+		const matches = condition.mime.some((entry) => {
+			const wanted = String(entry).toLowerCase()
+			if (wanted.endsWith('/*') || wanted.endsWith('/')) {
+				return mime.startsWith(wanted.replace(/\*$/, ''))
+			}
+			return mime === wanted
+		})
+		if (!matches) {
+			return false
+		}
+	}
+	return true
+}

package/src/components/CnFilesBrowser/filesBrowserColumns.js

@@ -219,3 +219,143 @@ export function sortNodesByColumn(nodes, column, ascending, rowData = null, isFo
 		return String(left).localeCompare(String(right)) * direction
 	})
 }
+
+/**
+ * Whether a cell value counts as filled in.
+ *
+ * @param {(Array|object|string|number|boolean|null|undefined)} value The value.
+ * @return {boolean} False for nothing, an empty string or an empty list.
+ */
+function isFilled(value) {
+	if (value === null || value === undefined || value === '') {
+		return false
+	}
+	return !(Array.isArray(value) && value.length === 0)
+}
+
+/**
+ * The single value a node is grouped under, as a string key: a list groups
+ * under its first entry, an object under its label, title, name or id.
+ *
+ * @param {(Array|object|string|number|boolean|null|undefined)} value The cell value.
+ * @return {(string|null)} The group key, or null when nothing is filled in.
+ */
+function groupKeyOf(value) {
+	const first = Array.isArray(value) ? value[0] : value
+	if (!isFilled(first)) {
+		return null
+	}
+	if (typeof first === 'object') {
+		const label = first.label ?? first.title ?? first.name ?? first.id
+		return isFilled(label) ? String(label) : null
+	}
+	return String(first)
+}
+
+/**
+ * The values a node carries in a column, as strings, for counting and
+ * filtering: every entry of a list, the one value otherwise.
+ *
+ * @param {object} column A resolved column.
+ * @param {object} node The node.
+ * @param {object} [rowData] The host's per-file data.
+ * @return {string[]} The values, deduplicated.
+ */
+function facetValuesOf(column, node, rowData) {
+	const value = fileColumnValue(column, node, rowData)
+	const entries = Array.isArray(value) ? value : [value]
+	const out = []
+	entries.forEach((entry) => {
+		const key = groupKeyOf(entry)
+		if (key !== null && !out.includes(key)) {
+			out.push(key)
+		}
+	})
+	return out
+}
+
+/**
+ * Group nodes on a column's value, in the order each value is first met.
+ * Nodes with no value come last, in one group whose value is null.
+ *
+ * @param {Array<object>} nodes The nodes, already in display order.
+ * @param {object} column The resolved column.
+ * @param {object} [rowData] The host's per-file data.
+ * @return {Array<{value: (string|null), nodes: Array<object>}>} The groups.
+ */
+export function groupNodes(nodes, column, rowData = null) {
+	const groups = []
+	const byKey = new Map()
+	const empty = { value: null, nodes: [] }
+	;(Array.isArray(nodes) ? nodes : []).forEach((node) => {
+		const key = column ? groupKeyOf(fileColumnValue(column, node, rowData)) : null
+		if (key === null) {
+			empty.nodes.push(node)
+			return
+		}
+		if (!byKey.has(key)) {
+			const group = { value: key, nodes: [] }
+			byKey.set(key, group)
+			groups.push(group)
+		}
+		byKey.get(key).nodes.push(node)
+	})
+	if (empty.nodes.length > 0) {
+		groups.push(empty)
+	}
+	return groups
+}
+
+/**
+ * The values in use in a column across the nodes, with how many nodes carry
+ * each; a list counts once per entry. Most used first, then in first-seen
+ * order.
+ *
+ * @param {Array<object>} nodes The nodes.
+ * @param {object} column The resolved column.
+ * @param {object} [rowData] The host's per-file data.
+ * @return {Array<{value: string, count: number}>} The values and counts.
+ */
+export function facetCounts(nodes, column, rowData = null) {
+	const counts = []
+	const byValue = new Map()
+	;(Array.isArray(nodes) ? nodes : []).forEach((node) => {
+		facetValuesOf(column, node, rowData).forEach((value) => {
+			if (!byValue.has(value)) {
+				const entry = { value, count: 0 }
+				byValue.set(value, entry)
+				counts.push(entry)
+			}
+			byValue.get(value).count += 1
+		})
+	})
+	return counts
+		.map((entry, index) => ({ entry, index }))
+		.sort((a, b) => (b.entry.count - a.entry.count) || (a.index - b.index))
+		.map(({ entry }) => entry)
+}
+
+/**
+ * Whether a node passes the chosen facet values: within one facet any chosen
+ * value will do, and every facet with a choice must pass. A facet with
+ * nothing chosen does not filter.
+ *
+ * @param {object} node The node.
+ * @param {object} selections Chosen values by column key.
+ * @param {object} columnsByKey Resolved columns by key.
+ * @param {object} [rowData] The host's per-file data.
+ * @return {boolean} True when the node stays in the list.
+ */
+export function nodeMatchesFacets(node, selections, columnsByKey, rowData = null) {
+	return Object.entries(selections || {}).every(([key, chosen]) => {
+		if (!Array.isArray(chosen) || chosen.length === 0) {
+			return true
+		}
+		const column = columnsByKey && columnsByKey[key]
+		if (!column) {
+			return true
+		}
+		const values = facetValuesOf(column, node, rowData)
+		return chosen.some((value) => values.includes(value))
+	})
+}

package/src/components/CnFormPage/CnFormPage.vue

@@ -116,6 +116,19 @@
 			v-if="!submitted || mode !== 'public'"
 			class="cn-form-page__form"
 			@submit.prevent="submit">
+			<!-- Spam protection: a field no person sees or reaches. A filled one
+			     means a bot; the submit then sends nothing (see `honeypot`). -->
+			<div v-if="honeypot" class="cn-form-page__honeypot" aria-hidden="true">
+				<label :for="`cn-form-page-hp-${honeypot}`">{{ t('nextcloud-vue', 'Leave this field empty') }}</label>
+				<input
+					:id="`cn-form-page-hp-${honeypot}`"
+					v-model="honeypotValue"
+					:name="honeypot"
+					type="text"
+					tabindex="-1"
+					autocomplete="off"
+					data-testid="cn-form-page-honeypot">
+			</div>
 			<!-- Paste to fill: only where it may be used (see smartPasteAvailable). -->
 			<div v-if="smartPasteAvailable" class="cn-form-page__smart-paste">
 				<NcButton type="button" data-testid="cn-form-page-smart-paste" @click="smartPasteOpen = true">
@@ -610,6 +623,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Name of a honeypot field for a form anonymous visitors fill in.
+		 * The field is rendered out of sight and out of the tab order; when
+		 * it is filled, submit sends nothing and shows the normal success,
+		 * so a bot learns nothing. Empty (default): no honeypot.
+		 */
+		honeypot: {
+			type: String,
+			default: '',
+		},
+
 		/** HTTP method for endpoint mode. POST | PUT | PATCH. */
 		submitMethod: {
 			type: String,
@@ -748,6 +772,8 @@ export default {
 			summaryKeys: [],
 			/** Per-field validation error messages, keyed by field.key. */
 			fieldErrors: {},
+			/** What a bot typed into the honeypot field; stays empty for a person. */
+			honeypotValue: '',
 			/**
 			 * Cache of resolved `endpoint`/`source` visibleWhen outcomes,
 			 * keyed by field.key. Resolved ONCE in `mounted()` — see the
@@ -1783,6 +1809,11 @@ export default {
 			}
 
 			this.lastError = null
+			if (this.honeypot && this.honeypotValue !== '') {
+				// A bot filled the field no person sees: send nothing, look done.
+				this.submitted = true
+				return
+			}
 			this.submitting = true
 			try {
 				if (this.submitEndpoint) {
@@ -1808,6 +1839,9 @@ export default {
 				// describes the transport ("Request failed with status code 400")
 				// and leaves the user to guess which field it meant.
 				this.lastError = serverErrorMessage(err)
+				// A refusal that names its fields (`findings[]`, as OpenRegister's
+				// form destination check answers 422) is marked on each field.
+				this.showServerFindings(err)
 				/**
 				 * Submit failure event. Payload is the thrown error / rejected reason.
 				 *
@@ -1820,6 +1854,45 @@ export default {
 			}
 		},
 
+		/**
+		 * Put each finding of a refused submit on its field.
+		 *
+		 * Reads `response.data.findings[]`, each `{ field?, property, message }`,
+		 * and marks the field whose key is the finding's `field`, or else its
+		 * `property`. Findings on no field of this form stay in the general
+		 * error above the form. Nothing happens for an answer without findings.
+		 *
+		 * @param {object} err The rejected request.
+		 * @return {void}
+		 */
+		showServerFindings(err) {
+			const findings = err?.response?.data?.findings
+			if (!Array.isArray(findings) || findings.length === 0) {
+				return
+			}
+			const keys = new Set(this.fields.map((f) => f && f.key))
+			const marked = []
+			for (const finding of findings) {
+				const key = finding && (finding.field || finding.property)
+				if (!key || !keys.has(key) || this.fieldErrors[key]) {
+					continue
+				}
+				this.fieldErrors[key] = String(finding.message || t('nextcloud-vue', 'This answer was refused.'))
+				marked.push(key)
+			}
+			if (marked.length === 0) {
+				return
+			}
+			this.summaryKeys = this.fields.map((f) => f.key).filter((key) => marked.includes(key))
+			if (this.hasSteps) {
+				const stepIndex = this.steps.findIndex((step) => this.stepFields(step).some((f) => f.key === this.summaryKeys[0]))
+				if (stepIndex >= 0) {
+					this.currentStepIndex = stepIndex
+				}
+			}
+			this.focusFirstError(this.summaryKeys[0])
+		},
+
 		async submitViaEndpoint() {
 			const method = (this.submitMethod || 'POST').toLowerCase()
 			const url = resolveParams(this.submitEndpoint, this.$route?.params || {})
@@ -1843,6 +1916,14 @@ export default {
 </script>
 
 <style>
+.cn-form-page__honeypot {
+	position: absolute;
+	left: -10000px;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+
 .cn-form-page {
 	display: flex;
 	flex-direction: column;

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -263,6 +263,31 @@
 					@update:activeIndex="onQuickFilterChange"
 					@update:selectedIndices="onQuickFilterMultiChange" />
 			</template>
+			<!-- Board look, `filterMenu` on a page with no filter sidebar: the
+			     board's Filter button, a menu of each enum column's values as
+			     toggleable filters. -->
+			<template v-if="boardFilterMenu" #filter-menu>
+				<NcActions
+					class="cn-actions-bar__filter-menu"
+					variant="secondary"
+					:forceMenu="true"
+					:menuName="t('nextcloud-vue', 'Filter')"
+					data-testid="cn-index-filter-menu">
+					<template #icon>
+						<Tune :size="16" />
+					</template>
+					<template v-for="field in filterableFields" :key="field.key">
+						<NcActionCaption :name="field.label" />
+						<NcActionCheckbox
+							v-for="val in field.values"
+							:key="`${field.key}-${val}`"
+							:modelValue="isFilterActive(field.key, val)"
+							@update:modelValue="toggleFilter(field.key, val)">
+							{{ val }}
+						</NcActionCheckbox>
+					</template>
+				</NcActions>
+			</template>
 		</CnActionsBar>
 
 		<!-- Quick edit: a few fields of one row, over the list, with the list
@@ -625,10 +650,10 @@
 					     the column menu lists every governed column as a visibility
 					     checkbox — compact, in-table alternatives to the sidebar. -->
 					<template
-						v-if="(filterMenu && filterableFields.length) || (columnMenu && governedColumns.length)"
+						v-if="(showHeaderFilterMenu) || (columnMenu && governedColumns.length)"
 						#actions-header>
 						<NcActions
-							v-if="filterMenu && filterableFields.length"
+							v-if="showHeaderFilterMenu"
 							:forceMenu="true"
 							:aria-label="t('nextcloud-vue', 'Filter')">
 							<template #icon>
@@ -968,6 +993,7 @@ import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import Export from 'vue-material-design-icons/Export.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
+import Tune from 'vue-material-design-icons/Tune.vue'
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline.vue'
 import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
 import CnQuickEditDialog from '../../dialogs/CnQuickEditDialog.vue'
@@ -1275,6 +1301,7 @@ export default {
 		DatabaseSearch,
 		Export,
 		FilterOutline,
+		Tune,
 		ViewColumnOutline,
 		NcCheckboxRadioSwitch,
 		CnPageHeader,
@@ -1607,7 +1634,10 @@ export default {
 		 * unchanged. Under the board look a tab with `activeLabel` ("Pipeline:
 		 * Sales") adds a removable chip with that text to the Active line and
 		 * counts on the Filter badge while it is selected; removing the chip
-		 * goes back to the default tab.
+		 * goes back to the default tab. A tab can say `empty: "field"` (or a
+		 * list of fields) for the rows where the field has no value, and
+		 * `notEmpty` for the rows where it has one: it reads as the filter
+		 * `{ field: { isnull: true } }`.
 		 */
 		quickFilters: {
 			type: Array,
@@ -2892,6 +2922,8 @@ export default {
 		 * Show a filter menu (funnel button) in the table header, above the
 		 * row-actions column. Its menu lists every enum/badge column's values as
 		 * toggleable facet filters — a compact alternative to the facet sidebar.
+		 * Under the board look, on a page with no filter sidebar, it is the
+		 * toolbar's labelled Filter button instead (row 1, before the view switch).
 		 * Fed from the manifest as `pages[].config.filterMenu`.
 		 */
 		filterMenu: {
@@ -5606,6 +5638,27 @@ export default {
 			return !!this.resolvedSidebar.enabled && this.resolvedSidebar.show !== false
 		},
 
+		/**
+		 * Whether the board toolbar draws the Filter button as a menu: the
+		 * board look, `filterMenu` on, something to filter by, and no filter
+		 * sidebar (whose toggle is that button otherwise).
+		 *
+		 * @return {boolean}
+		 */
+		boardFilterMenu() {
+			return this.isBoardLook && this.filterMenu && !this.hasSidebar && this.filterableFields.length > 0
+		},
+
+		/**
+		 * Whether the funnel menu sits in the table header: `filterMenu` with
+		 * values to offer, unless the toolbar's Filter button is that menu.
+		 *
+		 * @return {boolean}
+		 */
+		showHeaderFilterMenu() {
+			return this.filterMenu && this.filterableFields.length > 0 && !this.boardFilterMenu
+		},
+
 		/** Search props forwarded to the embedded CnIndexSidebar (defaults applied per CnIndexSidebar). */
 		sidebarSearchProps() {
 			return (this.sidebar && this.sidebar.search) || {}

package/src/components/CnIndexSidebar/CnIndexSidebar.vue

@@ -270,7 +270,7 @@ import Pin from 'vue-material-design-icons/Pin.vue'
 import PinOutline from 'vue-material-design-icons/PinOutline.vue'
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline.vue'
 import { METADATA_COLUMNS } from '../../constants/metadata.js'
-import { facetOptionLabel } from '../../utils/facets.js'
+import { facetOptions } from '../../utils/facets.js'
 import { labelLang } from '../../utils/manifestTranslate.js'
 import { columnsFromSchema, filtersFromSchema } from '../../utils/schema.js'
 import { CnDateRangePicker, DEFAULT_DATE_RANGE_PRESETS } from '../CnDateRangePicker/index.js'
@@ -867,12 +867,12 @@ export default {
 		 * @param {object} filter Filter object
 		 */
 		getFilterOptions(filter) {
-			const facet = this.facetData[filter.key]
-			if (facet?.values?.length > 0) {
-				return facet.values.map((v) => ({
-					id: v.value,
-					label: facetOptionLabel(v),
-				}))
+			const live = facetOptions(
+				this.facetData[filter.key],
+				(count) => t('nextcloud-vue', 'No value ({count})', { count }),
+			)
+			if (live !== null) {
+				return live
 			}
 			// A reference picker's rows come from another list, and neither a
 			// schema enum nor a facet bucket can carry them.

package/src/components/CnNextStepCard/CnNextStepWidget.vue

@@ -21,7 +21,7 @@ import { resolveNextStep } from '../../utils/detailActionModel.js'
  * Renders CnNextStepCard for the bound record's stage from
  * `content: { field?, stages: { <stage>: { title?, checklist, after? } } }`.
  * The checklist only: the page's own primary button stays where the page
- * puts it. Resolved by its registry key, not exported.
+ * puts it. Resolved by its registry key, and exported for an app that renders it itself.
  */
 export default {
 	name: 'CnNextStepWidget',

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -619,7 +619,7 @@ export default {
 				// `secondary` (a second, muted line under the cell) rides
 				// along too: the table draws it, and dropping it here took the
 				// list rows' second line away (zuiddrecht-pixel-gaps-3).
-				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary']) {
+				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary', 'colorMap']) {
 					if (c[k] !== undefined) {
 						out[k] = c[k]
 					}

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -16,6 +16,13 @@
 			:rowActions="rowActions"
 			:newActions="newActions"
 			:linkedItems="linkedItems"
+			:columns="columns"
+			:rowData="rowDataSource"
+			:preferenceApp="preferenceApp"
+			:preferenceKey="preferenceKey"
+			:bulkActions="bulkActions"
+			:groupBy="groupBy"
+			:facets="facets"
 			@changed="onBrowserChanged" />
 		<template v-else>
 			<!-- Upload error -->
@@ -240,7 +247,7 @@ import CnFilePreview from '../CnFilePreview/CnFilePreview.vue'
 import CnFilesBrowser from '../CnFilesBrowser/CnFilesBrowser.vue'
 import { useFileOpener } from '../../composables/useFileOpener.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
-import { objectDisplayName, resolveObjectFolderInfo } from '../CnFilesBrowser/filesBrowser.js'
+import { indexRowData, objectDisplayName, resolveObjectFolderInfo } from '../CnFilesBrowser/filesBrowser.js'
 import { createOpenRegisterSource } from '../CnFilesBrowser/openRegisterSource.js'
 
 /**
@@ -359,6 +366,47 @@ export default {
 		 * Null fetches nothing.
 		 */
 		linkedItemsUrl: { type: String, default: null },
+		/**
+		 * Forwarded to CnFilesBrowser: the columns the browser shows, built-in
+		 * names or declared columns (`{ key, label, source, formatter }`).
+		 * A `source: 'row'` column reads the host's record for the file from
+		 * `rowDataUrl`. None keeps name, size and modified.
+		 *
+		 * @type {Array<string|object>}
+		 */
+		columns: { type: Array, default: () => [] },
+		/** Forwarded to CnFilesBrowser: the app id the user's column choice is stored under; unset offers no Columns chooser. */
+		preferenceApp: { type: String, default: '' },
+		/** Forwarded to CnFilesBrowser: the key the column choice is stored under. */
+		preferenceKey: { type: String, default: 'files-browser-columns' },
+		/**
+		 * An app endpoint that answers the host's own record per file, for the
+		 * browser's `source: 'row'` columns. App-relative; `{objectId}` is
+		 * replaced. Read once per listing. The answer is a list of records
+		 * (or the list at `rowDataPath`, or under `items` or `results`), each
+		 * naming its file in `rowDataKey`. Null reads nothing.
+		 */
+		rowDataUrl: { type: String, default: null },
+		/**
+		 * Forwarded to CnFilesBrowser: the host's actions on a selection of
+		 * files. With at least one, files get checkboxes and a bulk bar.
+		 *
+		 * @type {Array<{id: string, label: string, icon?: string, type?: string, target?: string, props?: object}>}
+		 */
+		bulkActions: { type: Array, default: () => [] },
+		/** Forwarded to CnFilesBrowser: the key of a declared column to group the files on. */
+		groupBy: { type: String, default: '' },
+		/**
+		 * Forwarded to CnFilesBrowser: keys of declared columns to filter on,
+		 * a chip per value in use.
+		 *
+		 * @type {string[]}
+		 */
+		facets: { type: Array, default: () => [] },
+		/** A dotted path to the list of records in the `rowDataUrl` answer; empty reads the answer itself. */
+		rowDataPath: { type: String, default: '' },
+		/** The record field that holds the Nextcloud file id. */
+		rowDataKey: { type: String, default: 'fileId' },
 		/** Label of the Download action. */
 		downloadLabel: { type: String, default: () => t('nextcloud-vue', 'Download') },
 		/** Label of the action that opens the Files sidebar on the file. */
@@ -424,6 +472,27 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The browser's `rowData`: a function that reads the host's records
+		 * from `rowDataUrl` and keys them by file id, or null without a url.
+		 * The browser calls it once per listing.
+		 *
+		 * @return {(function(): Promise<object>)|null} The row data source.
+		 * @spec openspec/changes/files-browser-hosts-a-documents-list/specs/files-browser/spec.md
+		 */
+		rowDataSource() {
+			if (!this.rowDataUrl || !this.objectId) {
+				return null
+			}
+			const url = generateUrl(this.rowDataUrl.replace('{objectId}', encodeURIComponent(this.objectId)))
+			const path = this.rowDataPath
+			const key = this.rowDataKey
+			return async () => {
+				const { data } = await axios.get(url)
+				return indexRowData(data, { path, key })
+			}
+		},
+
 		/**
 		 * The root crumb: the host's label, else the object's name (its folder
 		 * on disk is called after its uuid), else the folder's own name.

package/src/components/CnObjectSidebar/CnNotesTab.vue

@@ -18,6 +18,8 @@
 					{{ cancelLabel }}
 				</NcButton>
 			</p>
+			<!-- @slot composer-before An app's own control above the composer, e.g. a template picker. Scope: `{ setText, text }`; `setText(text)` fills the composer, `text` is what it holds now. -->
+			<slot name="composer-before" :setText="setComposerText" :text="newNoteText" />
 			<CnNoteComposer
 				class="cn-sidebar-tab__composer"
 				:modelValue="newNoteText"
@@ -481,6 +483,20 @@ export default {
 			}
 		},
 
+		/**
+		 * Fill the composer from outside, for the `composer-before` slot.
+		 *
+		 * The app decides what goes in (a template body, a quoted line); the
+		 * composer stays the one place the text lives, so sending, editing and
+		 * the mention picker all see it exactly as if it had been typed.
+		 *
+		 * @param {string} text The text the composer should hold.
+		 * @return {void}
+		 */
+		setComposerText(text) {
+			this.newNoteText = (text === null || text === undefined) ? '' : String(text)
+		},
+
 		startEdit(note) {
 			this.replyTo = null
 			this.editingNoteId = note.id