@conduction/nextcloud-vue 2.76.0 → 2.78.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -533,7 +533,8 @@
 				<!-- Empty state -->
 				<div v-else-if="effectiveObjects.length === 0" class="cn-index-page__empty">
 					<slot name="empty">
-						<CnEmptyContent :name="resolvedEmptyText">
+						<CnEmptyContent :name="lensReasonText || resolvedEmptyText"
+							:data-lens-unavailable="lensReasonText ? 'true' : null">
 							<template #icon>
 								<CnIcon v-if="resolvedIcon" :name="resolvedIcon" :size="64" />
 								<DatabaseSearch v-else :size="64" />
@@ -573,14 +574,15 @@
 					@rowClick="onRowClick"
 					@rowAuxClick="onRowAuxClick"
 					@rowContextMenu="onRowContextMenu">
-					<!-- Star column (showFavouriteColumn) -->
-					<template v-if="showFavouriteColumn" #column-__favourite="{ row }">
-						<CnFavouriteToggle
-							v-if="row && row['@self'] && typeof row['@self'].favourite === 'boolean'"
+					<!-- Follow column (showFollowColumn, or the deprecated showFavouriteColumn) -->
+					<template v-if="followColumnOn" #column-__follow="{ row }">
+						<CnFollowToggle
+							v-if="row && row['@self'] && typeof row['@self'].watching === 'boolean'"
+							compact
 							:register="typeof register === 'string' ? register : ''"
 							:schema="favouriteSchemaSlug"
 							:objectId="String(row['@self'].id || row.id || '')"
-							:favourite="row['@self'].favourite === true" />
+							:watching="row['@self'].watching === true" />
 					</template>
 
 					<!-- Pass through column slots -->
@@ -955,7 +957,7 @@ import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
 import CnQuickEditDialog from '../../dialogs/CnQuickEditDialog.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnEmptyContent from '../CnEmptyContent/CnEmptyContent.vue'
-import CnFavouriteToggle from '../CnFavouriteToggle/CnFavouriteToggle.vue'
+import CnFollowToggle from '../CnFollowToggle/CnFollowToggle.vue'
 import { useContextMenu } from '../../composables/index.js'
 import { useLook } from '../../composables/useLook.js'
 import { copyKindsOf } from '../../composables/useObjectCopy.js'
@@ -968,6 +970,7 @@ import { buildOnSuccessRoute, resolveRegisteredHandler } from '../../utils/actio
 import { reportBindingProblems } from '../../utils/diagnostics.js'
 import { fetchFilterCounts } from '../../utils/fetchFilterCounts.js'
 import { buildExportUrl } from '../../utils/indexExportHelpers.js'
+import { lensUnavailableText } from '../../utils/lensAvailability.js'
 import { openRowTarget } from '../../utils/linkNavigation.js'
 import { resolveClaimedTeams, resolveClaimTokens, splitViewsIntoTabs, viewAsTab, viewIdOf } from '../../utils/listLenses.js'
 import { LIST_SHORTCUTS, listPaletteCommands, shortcutFor } from '../../utils/listShortcuts.js'
@@ -1037,8 +1040,8 @@ const CALENDAR_PAGE_SIZE = 200
  */
 const RANGE_SEPARATOR = '..'
 
-/** Key of the synthetic star column (`showFavouriteColumn`). */
-const FAVOURITE_COLUMN_KEY = '__favourite'
+/** Key of the synthetic follow column (`showFollowColumn`). */
+const FOLLOW_COLUMN_KEY = '__follow'
 
 /**
  * Whether a schema property wants a from/to pair rather than a value list.
@@ -1240,7 +1243,7 @@ export default {
 
 	components: {
 		CnBuildiqEditButton,
-		CnFavouriteToggle,
+		CnFollowToggle,
 		NcLoadingIcon,
 		CnEmptyContent,
 		NcActions,
@@ -1576,9 +1579,10 @@ export default {
 		},
 
 		/**
-		 * Personal lenses appended to the quick filters: any of `favourite`
-		 * (`_favourite`), `recent` (`_recent`), `watching` (`_watching`) and
-		 * `unread` (`_unread`).
+		 * Personal lenses appended to the quick filters: any of `watching`
+		 * (`_watching`, labelled Following), `recent` (`_recent`) and `unread`
+		 * (`_unread`). `favourite` is a deprecated alias of `watching`: a
+		 * favourite is a follow now, and asking for both gives one tab.
 		 * They combine with every other filter. While Recent is active column
 		 * sorting is off, because the lens owns the order. Manifest
 		 * `config.personalLenses`.
@@ -1591,9 +1595,20 @@ export default {
 		},
 
 		/**
-		 * Add a first column with a star per row (`CnFavouriteToggle`), bound to
-		 * each row's `@self.favourite`. Clicking it does not open the row.
-		 * Manifest `config.showFavouriteColumn`.
+		 * Add a first column with a follow toggle per row (`CnFollowToggle`,
+		 * compact), bound to each row's `@self.watching`. Clicking it does not
+		 * open the row. Manifest `config.showFollowColumn`.
+		 */
+		showFollowColumn: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Deprecated alias of `showFollowColumn`: the star column became the
+		 * follow column (OpenRegister `merge-follow-and-favourites`).
+		 *
+		 * @deprecated Use `showFollowColumn`.
 		 */
 		showFavouriteColumn: {
 			type: Boolean,
@@ -2088,6 +2103,34 @@ export default {
 			default: 'No items found',
 		},
 
+		/**
+		 * Personal-lens report of the list on screen, for a host that fetches
+		 * itself: the response's `@self.lenses` (`{ recent: { available,
+		 * reason } }`). In self-fetch mode the page reads it from the store
+		 * and this prop is ignored. When a lens reports `available: false`
+		 * the empty state explains why instead of showing `emptyText`.
+		 *
+		 * @type {object|null}
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-an-unavailable-lens-explains-its-empty-page
+		 */
+		lenses: {
+			type: Object,
+			default: null,
+		},
+
+		/**
+		 * App wording for an unavailable lens, keyed `<lens>.<reason>`
+		 * (`recent.audit-trail-disabled`) or `<reason>`; the specific key
+		 * wins, and both win over the library's object-neutral text.
+		 *
+		 * @type {{[key: string]: string}|null}
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-an-unavailable-lens-explains-its-empty-page
+		 */
+		lensReasonTexts: {
+			type: Object,
+			default: null,
+		},
+
 		/** Accessible label for the loading spinner (NcLoadingIcon aria-label) */
 		loadingText: {
 			type: String,
@@ -3279,6 +3322,40 @@ export default {
 			return this.emptyText ? fn(this.emptyText) : this.emptyText
 		},
 
+		/**
+		 * The personal-lens reports of the list on screen: the store's copy
+		 * of the latest response in self-fetch mode, else the `lenses` prop.
+		 *
+		 * @return {object}
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-a-list-response-carries-the-report-of-the-lenses-it-was-asked-for
+		 */
+		effectiveLenses() {
+			if (this.isNamedSource) {
+				return {}
+			}
+			if (this.isSelfFetchMode) {
+				return (this.list.lenses && this.list.lenses.value) || {}
+			}
+			return this.lenses || {}
+		},
+
+		/**
+		 * Why the list is empty when a personal lens could not answer (the
+		 * audit trail is off, nobody is logged in, the history could not be
+		 * read), or `''` to keep the generic empty text.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-an-unavailable-lens-explains-its-empty-page
+		 */
+		lensReasonText() {
+			const text = lensUnavailableText(this.effectiveLenses, this.lensReasonTexts)
+			if (!text) {
+				return ''
+			}
+			const fn = typeof this.cnTranslate === 'function' ? this.cnTranslate : (k) => k
+			return fn(text)
+		},
+
 		/**
 		 * Whether the host manifest editor is in edit mode (unwraps the injected
 		 * `cnEditingBody`, which may be a Vue ref or a plain boolean). Drives the
@@ -4172,12 +4249,22 @@ export default {
 			if (this.recentLensActive) {
 				cols = cols.map((col) => (col && typeof col === 'object' ? { ...col, sortable: false } : col))
 			}
-			if (this.showFavouriteColumn && this.favouriteSchemaSlug !== '') {
-				cols = [{ key: FAVOURITE_COLUMN_KEY, label: '', sortable: false, width: '48px' }, ...cols]
+			if (this.followColumnOn && this.favouriteSchemaSlug !== '') {
+				cols = [{ key: FOLLOW_COLUMN_KEY, label: '', sortable: false, width: '48px' }, ...cols]
 			}
 			return cols
 		},
 
+		/**
+		 * Whether the follow column renders (`showFollowColumn`, or the deprecated `showFavouriteColumn`).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/one-follow-control/specs/record-follow/spec.md#requirement-index-pages-offer-one-following-lens-and-a-follow-column
+		 */
+		followColumnOn() {
+			return this.showFollowColumn || this.showFavouriteColumn
+		},
+
 		/**
 		 * Whether the active quick filter is the Recent lens.
 		 *
@@ -4192,7 +4279,7 @@ export default {
 		},
 
 		/**
-		 * Schema slug the star column calls with: the page's own slug in self-fetch
+		 * Schema slug the follow column calls with: the page's own slug in self-fetch
 		 * mode, else the schema object's `slug`. Empty when neither is known.
 		 *
 		 * @return {string}
@@ -5069,6 +5156,7 @@ export default {
 		 * stable key and a variant.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @spec openspec/changes/screens-index-header-buttons-parity/specs/index-list-board-look/spec.md#requirement-the-add-header-button-carries-a-plus
 		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string, format: string}>}
 		 */
 		resolvedHeaderButtons() {
@@ -5081,6 +5169,11 @@ export default {
 					if (label === '' && button.action === 'add') {
 						label = this.resolvedAddLabel
 					}
+					// The board's primary button reads "+ New request": the Add
+					// button takes the plus unless the manifest names an icon.
+					if (this.isBoardLook && button.action === 'add' && icon === '') {
+						icon = 'Plus'
+					}
 					// The board's header: Export reads "Download" with its icon and
 					// the Actions menu reads "Actions", without the manifest saying so.
 					if (this.isBoardLook && label === '' && button.action === 'export') {

package/src/components/CnObjectDataWidget/CnObjectDataWidget.vue

@@ -149,6 +149,28 @@
 								@update:modelValue="onRelationChange(field, $event)"
 								@close="commitEdit" />
 
+							<!-- Nextcloud group or user (`referenceType: nextcloud-group`
+						     / `nextcloud-user`, one or a list): pick by display name,
+						     store the group id or uid. The same search the create and
+						     edit dialogs use. -->
+							<component
+								:is="isUserPicker(field) ? 'NcSelectUsers' : 'NcSelect'"
+								v-else-if="isPersonPicker(field)"
+								ref="activeEditor"
+								:inputLabel="field.label"
+								:labelOutside="true"
+								:options="personOptions[field.key] || []"
+								:modelValue="personSelected(field)"
+								:multiple="isPersonMultiple(field)"
+								:keepOpen="isPersonMultiple(field)"
+								:loading="personLoading === field.key"
+								:filterable="false"
+								:clearable="!field.required"
+								label="label"
+								@search="(q) => searchPeople(field, q)"
+								@update:modelValue="onPersonChange(field, $event)"
+								@close="isPersonMultiple(field) ? undefined : commitEdit()" />
+
 							<!-- Select -->
 							<NcSelect
 								v-else-if="field.widget === 'select'"
@@ -259,7 +281,17 @@
 							:value="displayValues[field.key]"
 							:raw="(objectData || {})[field.key]" />
 						<template v-else>
-							<img v-if="isImageField(field) && rawOf(field)"
+							<!-- A Nextcloud group (or list): its display name, cached
+							     per id; the id while the name loads or when unknown. -->
+							<span
+								v-if="isGroupPicker(field) && groupIdsOf(field).length"
+								class="cn-object-data-widget__groups">
+								<template v-for="(gid, gi) in groupIdsOf(field)" :key="gid">
+									<span v-if="gi > 0">, </span>
+									<CnGroupNameCell :gid="gid" />
+								</template>
+							</span>
+							<img v-else-if="isImageField(field) && rawOf(field)"
 								:src="rawOf(field)"
 								:alt="field.label"
 								class="cn-object-data-widget__image">
@@ -370,19 +402,22 @@
 import axios from '@nextcloud/axios'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcTextField } from '@nextcloud/vue'
+import { NcActionButton, NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcSelectUsers, NcTextField } from '@nextcloud/vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
+import CnGroupNameCell from '../CnCellRenderer/CnGroupNameCell.vue'
 import CnFormDialog from '../CnFormDialog/CnFormDialog.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { useObjectStore } from '../../store/index.js'
+import { groupDisplayName, loadGroupDisplayName, searchNextcloudGroups } from '../../utils/groupAutocomplete.js'
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js'
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { fieldsFromSchema, formatValue } from '../../utils/schema.js'
 import { schemaRefSlug } from '../../utils/schemaRefSlug.js'
+import { resolveNextcloudUser, searchNextcloudUsers } from '../../utils/userAutocomplete.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnObjectMetadataModal } from '../CnObjectMetadataModal/index.js'
 import { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'
@@ -427,6 +462,8 @@ export default {
 		NcLoadingIcon,
 		NcTextField,
 		NcSelect,
+		NcSelectUsers,
+		CnGroupNameCell,
 		NcCheckboxRadioSwitch,
 		NcActionButton,
 		CnWidgetWrapper,
@@ -806,6 +843,12 @@ export default {
 			relationOptions: {},
 			/** Whether relation picker options are being fetched. */
 			relationOptionsLoading: false,
+			/** Group and user picker options per field key ({ id, label }[]). */
+			personOptions: {},
+			/** Key of the group or user field whose options are loading, or null. */
+			personLoading: null,
+			/** Display names of users seen in a user picker, by uid. */
+			userLabels: {},
 			/** Whether the user expanded the widget to see every field. */
 			expanded: false,
 			/** Fields that fit the cell while collapsed; null when all fit. */
@@ -1719,6 +1762,11 @@ export default {
 			if (this.isSingleRelationField(field.key)) {
 				this.loadRelationOptions(field.key)
 			}
+			// Group and user fields pick from Nextcloud's own directory.
+			if (this.isPersonPicker(field)) {
+				this.searchPeople(field, '')
+				this.resolvePersonLabels(field, currentValue)
+			}
 
 			this.$nextTick(() => {
 				// Focus the editor
@@ -1944,6 +1992,182 @@ export default {
 			return options.find((opt) => opt.id === val) || { id: val, label: String(val) }
 		},
 
+		/**
+		 * Whether a field picks a Nextcloud group (widget `group` or
+		 * `group-multiselect`, from `referenceType: nextcloud-group`).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isGroupPicker(field) {
+			return !!field && (field.widget === 'group' || field.widget === 'group-multiselect')
+		},
+
+		/**
+		 * Whether a field picks a Nextcloud user (widget `user` or
+		 * `user-multiselect`, from `referenceType: nextcloud-user`).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isUserPicker(field) {
+			return !!field && (field.widget === 'user' || field.widget === 'user-multiselect')
+		},
+
+		/**
+		 * Whether a field picks a group or a user.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isPersonPicker(field) {
+			return this.isGroupPicker(field) || this.isUserPicker(field)
+		},
+
+		/**
+		 * Whether a group or user field holds a list.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isPersonMultiple(field) {
+			return !!field && (field.widget === 'group-multiselect' || field.widget === 'user-multiselect')
+		},
+
+		/**
+		 * The group ids a group field holds, for the display mode.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {string[]}
+		 */
+		groupIdsOf(field) {
+			const raw = this.rawOf(field)
+			const list = Array.isArray(raw) ? raw : [raw]
+			return list.filter((v) => typeof v === 'string' && v !== '')
+		},
+
+		/**
+		 * The display name of a group id or uid, falling back to the id.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {string} id The group id or uid.
+		 * @return {string}
+		 */
+		personLabel(field, id) {
+			if (this.isGroupPicker(field)) {
+				return groupDisplayName(id) || String(id)
+			}
+			return this.userLabels[id] || String(id)
+		},
+
+		/**
+		 * Search Nextcloud groups or users for a picker. Fails soft (the
+		 * helpers return `[]`), so the picker stays usable with what it has.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {string} query The search term.
+		 * @return {Promise<void>}
+		 */
+		async searchPeople(field, query) {
+			this.personLoading = field.key
+			try {
+				const options = this.isGroupPicker(field)
+					? await searchNextcloudGroups(query || '')
+					: await searchNextcloudUsers(query || '')
+				const list = Array.isArray(options) ? options : []
+				if (this.isUserPicker(field)) {
+					const labels = { ...this.userLabels }
+					for (const opt of list) {
+						labels[opt.id] = opt.label
+					}
+					this.userLabels = labels
+				}
+				this.personOptions = { ...this.personOptions, [field.key]: list }
+			} finally {
+				if (this.personLoading === field.key) {
+					this.personLoading = null
+				}
+			}
+		},
+
+		/**
+		 * Look up the display names of the value a group or user field holds,
+		 * so the open editor shows names rather than ids.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {unknown} value The held value (an id or a list of ids).
+		 * @return {Promise<void>}
+		 */
+		async resolvePersonLabels(field, value) {
+			const ids = (Array.isArray(value) ? value : [value])
+				.filter((v) => typeof v === 'string' && v !== '')
+			if (this.isGroupPicker(field)) {
+				await Promise.all(ids.map((gid) => loadGroupDisplayName(gid)))
+				return
+			}
+			const unknown = ids.filter((uid) => !this.userLabels[uid])
+			const options = await Promise.all(unknown.map((uid) => resolveNextcloudUser(uid)))
+			if (options.length > 0) {
+				const labels = { ...this.userLabels }
+				for (const opt of options) {
+					if (opt && opt.id) {
+						labels[opt.id] = opt.label || opt.id
+					}
+				}
+				this.userLabels = labels
+			}
+		},
+
+		/**
+		 * The selected option(s) of a group or user picker.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {object|object[]|null}
+		 */
+		personSelected(field) {
+			const toOption = (id) => {
+				const label = this.personLabel(field, id)
+				return { id, label, displayName: label }
+			}
+			const v = this.editData[field.key]
+			if (this.isPersonMultiple(field)) {
+				return (Array.isArray(v) ? v : [])
+					.filter((id) => typeof id === 'string' && id !== '')
+					.map(toOption)
+			}
+			return (typeof v === 'string' && v !== '') ? toOption(v) : null
+		},
+
+		/**
+		 * Store a group or user choice as the id (or list of ids).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {object|object[]|null} selected The chosen option(s).
+		 */
+		onPersonChange(field, selected) {
+			if (this.isPersonMultiple(field)) {
+				const ids = (Array.isArray(selected) ? selected : [])
+					.map((opt) => (opt && typeof opt === 'object' ? opt.id : opt))
+					.filter((id) => typeof id === 'string' && id !== '')
+				this.updateField(field.key, ids)
+				return
+			}
+			if (selected && this.isUserPicker(field) && selected.id) {
+				this.userLabels = { ...this.userLabels, [selected.id]: selected.label || selected.id }
+			}
+			this.updateField(field.key, selected && selected.id ? selected.id : null)
+		},
+
 		onSelectChange(field, option) {
 			this.updateField(field.key, option ? option.id : null)
 		},

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -8,6 +8,9 @@
 			v-if="browserRoot !== null"
 			:rootPath="browserRoot"
 			:rootLabel="browserRootLabel"
+			:uploadButton="uploadButton"
+			:dropOverlay="dropOverlay"
+			:dropHint="dropHint"
 			:rowActions="rowActions"
 			:newActions="newActions"
 			:linkedItems="linkedItems"
@@ -307,6 +310,12 @@ export default {
 		deleteLabel: { type: String, default: () => t('nextcloud-vue', 'Delete') },
 		/** What the files browser's root crumb reads; null shows the folder's own name, as the Files app does. */
 		browserRootLabel: { type: String, default: null },
+		/** Forwarded to CnFilesBrowser: a primary "Add files" button beside the New menu. */
+		uploadButton: { type: Boolean, default: false },
+		/** Forwarded to CnFilesBrowser: the drop state drawn over the list ("Drop to add") and announced. */
+		dropOverlay: { type: Boolean, default: false },
+		/** Forwarded to CnFilesBrowser: "Or drag files onto this list." under the list. */
+		dropHint: { type: Boolean, default: false },
 		/**
 		 * The host's own actions on each file row of the browser, forwarded
 		 * to CnFilesBrowser's `rowActions`: declared like any manifest action

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -33,11 +33,14 @@
 		</div>
 
 		<div class="cn-kpi-card__body cn-stat-widget__body">
-			<div v-if="content.label || rangePresets.length" class="cn-kpi-card__title cn-stat-widget__label">
+			<div
+				v-if="content.label || rangePresets.length"
+				class="cn-kpi-card__title cn-stat-widget__label"
+				:class="{ 'cn-kpi-card__title--badge-end': hasEndBadge }">
 				<!-- Board look: the icon is an 18px glyph before the label, and
 				     only when the tile links to a filtered list. -->
 				<span
-					v-if="isBoardLook && isLinked && resolvedIcon"
+					v-if="isBoardLook && isLinked && resolvedIcon && !hasEndBadge"
 					class="cn-kpi-card__glyph cn-stat-widget__glyph"
 					data-testid="cn-stat-widget-glyph"
 					aria-hidden="true">
@@ -66,6 +69,17 @@
 						{{ effectiveTranslate(preset.label || preset.id) }}
 					</option>
 				</select>
+				<!-- Board look, `content.iconPlacement: "end"`: the icon sits in a
+				     32px circle at the right of the label row, tinted by the
+				     tile's state (DqDashboard). -->
+				<span
+					v-if="hasEndBadge"
+					class="cn-kpi-card__badge cn-stat-widget__badge-icon"
+					:class="'cn-kpi-card__badge--' + stateTone"
+					data-testid="cn-stat-widget-icon-badge"
+					aria-hidden="true">
+					<CnWidgetIcon :name="resolvedIcon" :size="18" />
+				</span>
 			</div>
 
 			<div class="cn-kpi-card__value-row cn-stat-widget__value-row">
@@ -1330,9 +1344,45 @@ export default {
 			if (layout === 'vertical' || layout === 'stacked') {
 				return layout
 			}
+			// Board look: every KPI tile on the screens is stacked, so a tile
+			// that names no layout takes it. An explicit `horizontal` stays.
+			if (this.isBoardLook && layout === undefined) {
+				return 'stacked'
+			}
 			return 'horizontal'
 		},
 
+		/**
+		 * Whether the board look draws the icon in a tinted circle at the
+		 * right of the label row (`content.iconPlacement: "end"`), as the
+		 * DqDashboard tiles. Off without the board look and without an icon.
+		 *
+		 * @spec openspec/changes/screens-stat-tile-parity/specs/dashboard-page/spec.md#requirement-the-board-kpi-tile-can-carry-its-icon-at-the-end
+		 * @return {boolean}
+		 */
+		hasEndBadge() {
+			return this.isBoardLook
+				&& (this.content || {}).iconPlacement === 'end'
+				&& Boolean(this.resolvedIcon)
+		},
+
+		/**
+		 * The tile's state as a tone name for the end badge: the variant the
+		 * value colour comes from (`success`, `warning`, `error`), else
+		 * `primary`. A custom `valueColor` has no tone and reads as primary.
+		 *
+		 * @spec openspec/changes/screens-stat-tile-parity/specs/dashboard-page/spec.md#requirement-the-board-kpi-tile-can-carry-its-icon-at-the-end
+		 * @return {'primary'|'success'|'warning'|'error'}
+		 */
+		stateTone() {
+			const color = this.variantColor
+			if (!color) {
+				return 'primary'
+			}
+			const tone = ['success', 'warning', 'error'].find((name) => VARIANT_COLORS[name] === color)
+			return tone || 'primary'
+		},
+
 		/**
 		 * Whether the tile takes the stacked board look (`content.layout:
 		 * "stacked"`): a plain muted label, the number at 34px in the text

package/src/components/CnStatusBadge/CnStatusBadge.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import { isBadgeVariant } from '../../utils/badgeVariants.js'
+
 /**
  * CnStatusBadge — Color-coded pill badge for status, priority, or category display.
  *
@@ -39,12 +41,14 @@ export default {
 		},
 
 		/**
-		 * Color variant: 'default', 'primary', 'success', 'warning', 'error', 'info'
+		 * Color variant: 'default', 'primary', 'success', 'warning', 'error',
+		 * 'info', or one of the two board tones without a Nextcloud role,
+		 * 'purple' (work in progress) and 'teal' (handed on).
 		 */
 		variant: {
 			type: String,
 			default: 'default',
-			validator: (v) => ['default', 'primary', 'success', 'warning', 'error', 'info'].includes(v),
+			validator: (v) => isBadgeVariant(v),
 		},
 
 		/** Size: 'small' or 'medium' */

package/src/components/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -370,6 +370,19 @@ export default {
 			default: undefined,
 		},
 
+		/**
+		 * App wording for an unavailable personal lens (a `source.filter._recent`
+		 * tile on an instance that does not log reads), keyed `<lens>.<reason>`
+		 * or `<reason>`. Forwarded to CnDataTable, which shows the library's
+		 * object-neutral text without it.
+		 *
+		 * @spec openspec/changes/lens-says-why-it-is-empty/specs/personal-lens-availability/spec.md#requirement-an-unavailable-lens-explains-its-empty-page
+		 */
+		lensReasonTexts: {
+			type: Object,
+			default: undefined,
+		},
+
 		/**
 		 * Leading per-row icon: a static MDI icon name string, or a function
 		 * `(row) => iconName`. Forwarded to CnDataTable.