@conduction/nextcloud-vue 2.76.0 → 2.77.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}

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/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.

package/src/composables/useListView.js

@@ -98,6 +98,9 @@ export function useListView(objectTypeOrOptions, options) {
 	// field (a folder pane grouping by it, say) reads them here rather than
 	// deriving them from `objects`, which is only the current page.
 	const facets = computed(() => objectStore.facets[getType()] || {})
+	// Personal-lens reports of the latest response (`{ recent: { available, reason } }`).
+	// @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
+	const lenses = computed(() => (objectStore.lenses && objectStore.lenses[getType()]) || {})
 	// Outcome of the latest `refresh()`: the store's error for it, or null once
 	// it succeeded or a later fetch stored new rows. The store keeps the previous
 	// rows on a failed fetch, so this is how a consumer tells stale rows from
@@ -381,6 +384,7 @@ export function useListView(objectTypeOrOptions, options) {
 		loading,
 		pagination,
 		facets,
+		lenses,
 		error,
 		// Local state
 		searchTerm,

package/src/css/look-board-detail.css

@@ -114,12 +114,26 @@
 
 /* ---- Folder tabs ------------------------------------------------------- */
 
+/* The strip draws no line of its own (design-system pull request 147). The card under it
+   carries its full border, top included, so the top-right corner is the
+   card's own rounded corner instead of a strip rule running straight past it.
+   The open tab overlaps that top border by 1px (the nav's -1px margin) and
+   paints over it, so it flows into the card as a folder tab. */
 .cn-look-board .cn-tabs--board .cn-tabs__bar {
-	border-bottom: 1px solid var(--color-border-dark);
+	border-bottom: none;
 	gap: 4px;
+	position: relative;
+}
+
+.cn-look-board .cn-tabs.cn-tabs--board .cn-tabs__bar::after {
+	content: none;
 }
 
+/* Tabs sit on the card's top edge; only the open tab reaches 1px further
+   down (min-height 35px below), over the card's top border. Top-aligned so
+   the inactive tabs do not stretch to the open tab's height. */
 .cn-look-board .cn-tabs--board .cn-tabs__nav {
+	align-items: flex-start;
 	gap: 4px;
 }
 
@@ -140,7 +154,11 @@
 	border-bottom: 1px solid var(--color-main-background);
 	border-top: 1px solid var(--color-border-dark);
 	font-weight: 700;
+	min-height: 35px;
+	padding-bottom: 9px;
 	padding-top: 8px;
+	position: relative;
+	z-index: 1;
 }
 
 /* The count: a grey, borderless 20px badge 8px after the label. */
@@ -177,10 +195,30 @@
 .cn-look-board .cn-tabs--board .cn-tabs__content > .cn-tab > :first-child .cn-widget-wrapper,
 .cn-look-board .cn-tabs--board .cn-tabs__content > .cn-tab > .cn-widget-wrapper,
 .cn-look-board .cn-tabs--board .cn-tabs__content > .cn-tab > .cn-detail-card {
-	border-top: none;
+	border-top: 1px solid var(--color-border);
 	border-radius: 0 12px 12px 12px;
 }
 
+/* A CnTabsWidget panel is the card itself: the same full border, so it joins
+   the open tab the same way. The top-left stays square under the first tab. */
+.cn-look-board .cn-tabs--board.cn-tabs-widget__tabs .cn-tabs__content {
+	border: 1px solid var(--color-border);
+	border-radius: 0 12px 12px 12px;
+}
+
+/* A panel of CnTabsWidget is the content block itself: the open tab flows
+   straight into it. The widget in the panel renders chromeless, but the board
+   card rule below (and the first-card rule above) used to give its wrapper a
+   border and a 12px radius again, so a second card sat inside the panel. Its
+   left edge ran down from the open tab and its rounded top-right drew a line
+   across the top right of the content block, where DqZaak shows one sheet.
+   Same specificity as the first-card rule and later, so it wins on order. */
+.cn-look-board .cn-tabs--board.cn-tabs-widget__tabs .cn-tabs__content .cn-widget-wrapper.cn-widget-wrapper--chromeless {
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+}
+
 /* ---- Body cards and side cards ----------------------------------------- */
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper,