@conduction/nextcloud-vue 2.137.0 → 2.139.0

package/src/components/CnOrderedListField/CnOrderedListField.vue

@@ -5,7 +5,11 @@
 
 <template>
 	<div class="cn-ordered-list-field" data-testid="cn-ordered-list-field">
-		<p v-if="label" :id="labelId" class="cn-ordered-list-field__label">
+		<p
+			v-if="label"
+			:id="labelId"
+			class="cn-ordered-list-field__label"
+			:class="{ 'hidden-visually': hideLabel }">
 			{{ label }}
 		</p>
 		<ol
@@ -192,6 +196,12 @@ export default {
 			default: '',
 		},
 
+		/** Keep the label for assistive technology only, when a heading above already says it. */
+		hideLabel: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** The picker's label. */
 		addLabel: {
 			type: String,

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -20,9 +20,11 @@
 		<div v-else-if="loading && rows.length === 0" class="cn-record-list__loading">
 			<NcLoadingIcon :size="20" :name="loadingLabel" />
 		</div>
-		<p v-else-if="rows.length === 0" class="cn-record-list__empty" data-testid="cn-record-list-empty">
-			{{ emptyLabel }}
-		</p>
+		<template v-else-if="rows.length === 0">
+			<p v-if="emptyLabel !== ''" class="cn-record-list__empty" data-testid="cn-record-list-empty">
+				{{ emptyLabel }}
+			</p>
+		</template>
 		<!-- notice: the rows as sentences in one toned box ("2 waarschuwingen: ..."). -->
 		<div
 			v-else-if="presentation === 'notice'"
@@ -251,6 +253,7 @@
 						<component
 							:is="item.action.tag"
 							class="cn-record-list__action"
+							:class="{ 'cn-record-list__action--outlined': rowActionOutlined }"
 							v-bind="item.action.attrs"
 							data-testid="cn-record-list-action"
 							v-on="item.action.tag === 'button' ? { click: () => runRowAction(item.row) } : {}">
@@ -1469,6 +1472,18 @@ export default {
 		 * @return {string}
 		 * @spec openspec/changes/record-list-table-row-actions/specs/record-list-table/spec.md#requirement-a-table-row-can-carry-a-second-line-and-an-actions-menu
 		 */
+		/**
+		 * Whether the row action is drawn as an outlined button sized to its
+		 * label (`rowAction.variant: "outlined"`, DqMijnTeam "Oppakken") instead
+		 * of the 150px pill (DcMijnActies "Stem uitbrengen").
+		 *
+		 * @return {boolean} True for the outlined variant.
+		 * @spec openspec/changes/board-row-action-outlined/specs/board-row-action-outlined/spec.md#requirement-a-dashboard-rows-action-is-an-outlined-button
+		 */
+		rowActionOutlined() {
+			return this.content?.rowAction?.variant === 'outlined'
+		},
+
 		rowActionsHeader() {
 			const own = this.content?.rowActionsHeader
 			return typeof own === 'string' && own !== '' ? this.translate(own) : t('nextcloud-vue', 'Actions')
@@ -1511,6 +1526,10 @@ export default {
 			if (this.conditionalEmptyText !== '') {
 				return this.conditionalEmptyText
 			}
+			// `emptyText: ""` says nothing on an empty list.
+			if (this.content?.emptyText === '') {
+				return ''
+			}
 			return this.content?.emptyText ? this.translate(this.content.emptyText) : t('nextcloud-vue', 'Nothing here yet')
 		},
 

package/src/components/CnSavedViewMenuSettings/CnSavedViewMenuSettings.vue

@@ -12,6 +12,7 @@
 			:modelValue="values"
 			:options="options"
 			:label="t('nextcloud-vue', 'Views in my menu')"
+			:hideLabel="true"
 			:addLabel="t('nextcloud-vue', 'Add view')"
 			:addPlaceholder="t('nextcloud-vue', 'Pick a saved view')"
 			:addHint="t('nextcloud-vue', 'You see your own views, the views shared with you and the default views. A new view goes to the bottom.')"

package/src/components/CnUserSettingsDialog/CnUserSettingsDialog.vue

@@ -400,7 +400,10 @@ export default {
 	background: var(--color-main-background);
 }
 
+/* A section's heading and description start at the text's edge, as the
+   board draws them (NcAppSettingsSection indents them 12px). */
 .cn-user-settings-dialog__sections :deep(.app-settings-section) {
+	--app-settings-section-text-offset: 0;
 	margin: 0;
 	padding: 0;
 	border: 0;

package/src/composables/indexSources.js

@@ -6,9 +6,11 @@
 import { getCanonicalLocale, translate as t } from '@nextcloud/l10n'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import { reactive } from 'vue'
+import AccountOutline from 'vue-material-design-icons/AccountOutline.vue'
 import CalendarClock from 'vue-material-design-icons/CalendarClock.vue'
 import Cancel from 'vue-material-design-icons/Cancel.vue'
 import Check from 'vue-material-design-icons/Check.vue'
+import EmailOutline from 'vue-material-design-icons/EmailOutline.vue'
 import HandBackRight from 'vue-material-design-icons/HandBackRight.vue'
 import LightningBolt from 'vue-material-design-icons/LightningBolt.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
@@ -19,6 +21,7 @@ import { fillTemplate } from '../utils/fillTemplate.js'
 import { FLOW_RUN_ERROR_STATUSES, flowRunStatuses } from '../utils/flowRunStatus.js'
 import { fetchGroupMembers, fetchPresence, fetchStatuses, fetchUsers } from '../utils/nextcloudDirectory.js'
 import { readPath } from '../utils/readPath.js'
+import { resolveNextcloudUser } from '../utils/userAutocomplete.js'
 import { useFlowStore } from './useFlowStore.js'
 import { organisationRecord, useOrganisationStore } from './useOrganisationStore.js'
 import { useTaskInboxStore } from './useTaskInboxStore.js'
@@ -1088,7 +1091,7 @@ function fillRowTemplate(template, row) {
  * and its count (DqZoekresultaten).
  *
  * `sourceConfig.kinds` lists what is searched:
- * `{ id, label, register, schema, titleField?, subtitleField?, statusField?, statusResolve?, linkedField?, linkedTemplate?, href?, limit? }`
+ * `{ id, label, register, schema, titleField?, subtitleField?, subtitleTemplate?, statusField?, statusResolve?, linkedField?, linkedTemplate?, linkedUser?, href?, limit? }`
  * for objects (OpenRegister's `_search`, so the reader sees what they may
  * read), or `{ id, label, files: true, limit? }` for the reader's files
  * (Nextcloud's unified search). The term is `sourceConfig.term`, else the
@@ -1102,6 +1105,10 @@ function fillRowTemplate(template, row) {
  * coloured by `sourceConfig.statusColorMap`. `linkedTemplate` (a field
  * template, "{case.title}") or `linkedField` (a path) fills the "Linked"
  * column, drawn when a kind declares one; `sourceConfig.linkedLabel` names it.
+ * `subtitleTemplate` ("Case {identifier}", translated) fills the line under a
+ * result, else `subtitleField`.
+ * `linkedUser: true` reads that value as a user id and shows the user's
+ * display name. `sourceConfig.columnWidths` sets a width per column key.
  * The page's title and count line can name the term as `{term}`, and the
  * count is the active kind's total. Kind, link and status are filterable.
  *
@@ -1111,6 +1118,23 @@ function fillRowTemplate(template, row) {
  * @return {object} The source adapter.
  * @spec openspec/changes/index-search-source/specs/index-page/spec.md#requirement-an-index-page-can-search-several-schemas-and-files
  */
+/**
+ * Columns with the widths a page names per column key
+ * (`sourceConfig.columnWidths`, `{ title: '250px' }`); a column it does not
+ * name keeps none.
+ *
+ * @param {Array<object>} columns The columns.
+ * @param {object|undefined} widths The widths by key.
+ * @return {Array<object>} The columns.
+ * @spec openspec/changes/search-linked-user-and-widths/specs/search-linked-user-and-widths/spec.md
+ */
+function withColumnWidths(columns, widths) {
+	if (!widths || typeof widths !== 'object') {
+		return columns
+	}
+	return columns.map((col) => (typeof widths[col.key] === 'string' && widths[col.key] !== '' ? { ...col, width: widths[col.key] } : col))
+}
+
 function searchSource(config = {}, context = {}) {
 	const translate = typeof context.translate === 'function' ? context.translate : (text) => text
 	const kinds = (Array.isArray(config && config.kinds) ? config.kinds : [])
@@ -1199,12 +1223,27 @@ function searchSource(config = {}, context = {}) {
 		return ''
 	}
 
+	const subtitleOf = (kind, object) => {
+		if (kind.subtitleTemplate) {
+			return fillTemplate(translate(kind.subtitleTemplate), object)
+		}
+		return kind.subtitleField ? String(readPath(object, kind.subtitleField) ?? '') : ''
+	}
+
+	// `linkedUser`: the Linked cell holds a user id; name the user instead.
+	const linkedUserNames = async (kind, objects) => {
+		const ids = [...new Set(objects.map((object) => linkedOf(kind, object)).filter((id) => id !== ''))]
+		const options = await Promise.all(ids.map((id) => resolveNextcloudUser(id).catch(() => null)))
+		return new Map(ids.map((id, index) => [id, (options[index] && options[index].label) || id]))
+	}
+
 	const searchObjects = async (axios, kind, term) => {
 		const url = generateUrl('/apps/openregister/api/objects/{register}/{schema}', { register: kind.register, schema: kind.schema })
 		const res = await axios.get(url, { params: { _search: term, _limit: kind.limit || 20 } })
 		const body = (res && res.data) || {}
 		const results = Array.isArray(body.results) ? body.results : (Array.isArray(body) ? body : [])
 		const labels = kind.statusResolve && kind.statusField ? await statusLabels(kind) : null
+		const userNames = kind.linkedUser === true ? await linkedUserNames(kind, results) : null
 		return {
 			total: typeof body.total === 'number' ? body.total : results.length,
 			rows: results.map((object) => {
@@ -1219,9 +1258,9 @@ function searchSource(config = {}, context = {}) {
 					kindLabel: kind.label,
 					kindText: kindTextOf(kind, object),
 					title: String(readPath(object, kind.titleField || 'title') ?? object.name ?? id ?? ''),
-					subtitle: kind.subtitleField ? String(readPath(object, kind.subtitleField) ?? '') : '',
+					subtitle: subtitleOf(kind, object),
 					status,
-					linked: linkedOf(kind, object),
+					linked: userNames ? (userNames.get(linkedOf(kind, object)) || linkedOf(kind, object)) : linkedOf(kind, object),
 					href: kind.href ? generateUrl(fillRowTemplate(kind.href, { ...object, id })) : '',
 					object,
 				}
@@ -1329,7 +1368,7 @@ function searchSource(config = {}, context = {}) {
 		 */
 		loading: () => state.loading,
 
-		columns: [
+		columns: withColumnWidths([
 			{ key: 'title', label: t('nextcloud-vue', 'Result'), secondary: 'subtitle', sortable: true },
 			// `kindAsText`: what one row is, as plain text ("Zaak", "Lantaarnpaal",
 			// DqZoekresultaten), instead of the plural kind as a pill.
@@ -1344,7 +1383,7 @@ function searchSource(config = {}, context = {}) {
 				widgetProps: { colorMap: (config && config.statusColorMap) || {} },
 				sortable: true,
 			},
-		],
+		], config && config.columnWidths),
 
 		/**
 		 * Every column header carries a filter button (DqZoekresultaten); the
@@ -1406,14 +1445,24 @@ function searchSource(config = {}, context = {}) {
  * the pager asks for.
  *
  * @param {Array<object>} members The members, by name.
- * @param {object} config `search`, `sortKey`, `sortOrder`, `limit`, `offset`.
+ * @param {object} config `search`, `nameLike`, `rolesLike`, `emailLike`, `today`, `sortKey`, `sortOrder`, `limit`, `offset`.
  * @return {{rows: Array<object>, total: number}} The page and how many match.
  */
 function membersPage(members, config = {}) {
+	const has = (member, fields, text) => fields.some((field) => String(member[field] || '').toLowerCase().includes(text))
 	const term = String(config.search || '').trim().toLowerCase()
-	let rows = term === ''
-		? members.slice()
-		: members.filter((member) => ['displayname', 'function', 'roles', 'email'].some((field) => String(member[field] || '').toLowerCase().includes(term)))
+	let rows = term === '' ? members.slice() : members.filter((member) => has(member, ['displayname', 'function', 'roles', 'email'], term))
+	// The table heads' filters: text contains, and the Today values picked.
+	for (const [param, fields] of [['nameLike', ['displayname', 'function']], ['rolesLike', ['roles']], ['emailLike', ['email']]]) {
+		const text = String(config[param] || '').trim().toLowerCase()
+		if (text !== '') {
+			rows = rows.filter((member) => has(member, fields, text))
+		}
+	}
+	const today = (Array.isArray(config.today) ? config.today : (config.today ? [config.today] : [])).map(String)
+	if (today.length > 0) {
+		rows = rows.filter((member) => today.includes(member.today))
+	}
 	if (config.sortKey) {
 		const sign = config.sortOrder === 'desc' ? -1 : 1
 		rows = rows.sort((a, b) => sign * String(a[config.sortKey] ?? '').localeCompare(String(b[config.sortKey] ?? '')))
@@ -1475,10 +1524,11 @@ function usersSource() {
 		 */
 		load: async (config) => {
 			const group = String((config && (config.group || config.defaultGroup)) || '')
-			const { search, sortKey, sortOrder, limit, offset, ...request } = config || {}
+			const { search, sortKey, sortOrder, limit, offset, nameLike, rolesLike, emailLike, today, ...request } = config || {}
 			const key = JSON.stringify({ ...request, group })
-			// A new page, term or order of the members already read: no request.
-			if (key === membersKey && (offset !== undefined || search !== undefined || sortKey !== undefined)) {
+			const narrows = [offset, search, sortKey, nameLike, rolesLike, emailLike, today].some((value) => value !== undefined)
+			// A new page, term, order or head filter of the members already read: no request.
+			if (key === membersKey && narrows) {
 				const page = membersPage(readMembers, config)
 				state.rows = page.rows
 				state.total = page.total
@@ -1574,8 +1624,24 @@ function usersSource() {
 
 		searchFields: {
 			group: { param: 'group', single: true },
+			'displayname[like]': { param: 'nameLike', single: true },
+			'roles[like]': { param: 'rolesLike', single: true },
+			'email[like]': { param: 'emailLike', single: true },
+			today: { param: 'today' },
 		},
 
+		/** A filter button on every head (DqAfdelingen); the members read are narrowed here. */
+		headerFilters: true,
+
+		/**
+		 * A member's row menu (DqAfdelingen): their Nextcloud profile, and an
+		 * e-mail when they have an address. Both are links.
+		 */
+		rowActions: [
+			{ id: 'open-profile', label: t('nextcloud-vue', 'Open profile'), icon: AccountOutline, href: (row) => generateUrl(`/u/${encodeURIComponent(row.id)}`) },
+			{ id: 'send-email', label: t('nextcloud-vue', 'Send email'), icon: EmailOutline, href: (row) => `mailto:${row.email}`, visible: (row) => Boolean(row && row.email) },
+		],
+
 		showAdd: false,
 	}
 }

package/src/css/dialog.css

@@ -204,6 +204,24 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	gap: 10px;
 }
 
+/* A choice card with a checkbox (CnAssignDialog's toggles) is as tight as
+   the board draws it (DqOverdragen, 76px for a label and a two-line note):
+   10px 14px padding, the checkbox row at the 24px minimum target instead of
+   NcCheckboxRadioSwitch's 34px, the note at 1.2 line height. */
+.cn-dialog-board .cn-assign-dialog__toggle {
+	padding: 10px 14px;
+}
+
+.cn-dialog-board .cn-assign-dialog__toggle .checkbox-radio-switch-checkbox .checkbox-content,
+.cn-dialog-board .cn-assign-dialog__toggle .checkbox-radio-switch__input {
+	min-height: 24px;
+	padding-block: 0;
+}
+
+.cn-dialog-board .cn-assign-dialog__toggle-note {
+	line-height: 1.2;
+}
+
 /* Body: padding 20px 24px, 18px between blocks. */
 .cn-dialog-board .dialog__content {
 	display: flex;
@@ -212,6 +230,14 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	padding: 22px 24px 20px;
 }
 
+/* NcDialog's scoped `.dialog__content[data-v-…]` sets padding-inline-end
+   12px with the same specificity as the rule above, so wherever its chunk
+   loads later (an admin page's setup wizard) the body ran 12px wider than
+   the board (DqInstellen 684 for 672). This one outranks it. */
+.cn-dialog-board .dialog .dialog__content {
+	padding-inline-end: 24px;
+}
+
 .cn-dialog-board .dialog__content > .cn-dialog-header {
 	margin-bottom: -2px;
 }

package/src/css/index-page.css

@@ -221,6 +221,11 @@
 	font-size: 14px;
 }
 
+.cn-index-page__map-missing-note {
+	color: var(--color-main-text);
+	line-height: 1.45;
+}
+
 /* The selected folder's heading above the list. */
 /* A sort option whose endpoint failed: the note above the fallen-back list. */
 .cn-index-page__sort-source-note {

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

@@ -579,9 +579,16 @@
 .cn-look-board .cn-conversation-thread .cn-conversation-thread__meta:not(.cn-look-nextcloud *),
 .cn-look-board .cn-conversation-thread .cn-conversation-thread__meta time:not(.cn-look-nextcloud *) {
 	color: var(--cn-board-text-soft);
+	font-size: 13px;
 	line-height: normal;
 }
 
+/* 6px between the meta line and the text.
+   @spec openspec/changes/board-conversation-bubble-meta-gap/specs/board-conversation-bubble-meta-gap/spec.md#requirement-a-board-message-sets-its-meta-line-at-13px-6px-above-the-text */
+.cn-look-board .cn-conversation-thread .cn-conversation-thread__bubble:not(.cn-look-nextcloud *) {
+	gap: 6px;
+}
+
 .cn-look-board .cn-conversation-thread .cn-conversation-thread__message--us .cn-conversation-thread__bubble:not(.cn-look-nextcloud *) {
 	color: var(--color-main-text);
 }
@@ -1270,6 +1277,23 @@
 	line-height: normal;
 }
 
+/* Head and body text at line height 1.2, as the board draws the table. */
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content > .cn-tasks-widget .cn-tasks-widget__table :is(th, td) {
+	line-height: 1.2;
+}
+
+/* A long task name wraps under itself, as the board draws it, rather than
+   widening the table past the card. */
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content > .cn-tasks-widget .cn-tasks-widget__table :is(.cn-tasks-widget__name, .cn-tasks-widget__meta) {
+	white-space: normal;
+}
+
+/* A row's button and its task menu stand on one line. */
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content > .cn-tasks-widget .cn-tasks-widget__table .cn-tasks-widget__cell-actions > * {
+	display: inline-flex;
+	vertical-align: middle;
+}
+
 /* ---- An object list table edge to edge (`content.tableBleed`) ------------ */
 /* The case-tab boards draw a list's table edge to edge in its card
    (DqZaakContact "Contactmomenten op deze zaak", DqZaakGerelateerd): it runs
@@ -1557,3 +1581,15 @@
 	font-size: 14px;
 	line-height: 1.2;
 }
+
+/* The contacts tab inside a detail card (DqZaakBetrokkenen "Partijen") takes
+   the card's padding instead of its own, and its buttons start at the card's
+   edge under the subtitle.
+   @spec openspec/changes/board-contacts-in-card/specs/contacts/spec.md */
+.cn-look-board .cn-detail-page__leaf-card .cn-contacts-tab {
+	padding: 0;
+}
+
+.cn-look-board .cn-detail-page__leaf-card .cn-contacts-tab .cn-contacts-tab__header {
+	justify-content: flex-start;
+}

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

@@ -71,6 +71,27 @@
 	margin-inline-start: 0;
 }
 
+/* With the side panel open the buttons take the row under the title, the
+   breadcrumb and the count line follow (DqZakenSorteren).
+   @spec openspec/changes/board-header-buttons-under-title-beside-side-panel/specs/board-header-buttons-under-title-beside-side-panel/spec.md#requirement-the-header-buttons-sit-under-the-title-while-the-side-panel-is-open */
+.cn-look-board.cn-index-page--sidebar-open .cn-page-header .cn-index-page__header-buttons,
+.cn-look-board .cn-index-page--sidebar-open .cn-page-header .cn-index-page__header-buttons {
+	grid-column: 1 / -1;
+	grid-row: 2;
+	justify-self: start;
+	margin-block: 6px 3px;
+}
+
+.cn-look-board.cn-index-page--sidebar-open .cn-page-header .cn-header-trail,
+.cn-look-board .cn-index-page--sidebar-open .cn-page-header .cn-header-trail {
+	grid-row: 3;
+}
+
+.cn-look-board.cn-index-page--sidebar-open .cn-page-header .cn-page-header__text > .cn-page-header__description,
+.cn-look-board .cn-index-page--sidebar-open .cn-page-header .cn-page-header__text > .cn-page-header__description {
+	grid-row: 4;
+}
+
 /* The header buttons keep the board's button under a theme that styles every
    secondary or primary button with `!important` (the nldesign theme: a
    primary border, 8px 16px padding): Download and the Actions menu are 40px,

package/src/css/look-board.css

@@ -321,6 +321,20 @@
 	border: 0;
 }
 
+/* A dashboard banner's kicker is a 13px bold line in sentence case, no
+   tracking (DqMijnWerk "Vandaag eerst", BqMijnGoedkeuringen "First, today");
+   the plain look keeps its spaced capitals. The kicker is a paragraph, so its
+   size and weight also go to the theme's paragraph tokens.
+   @spec openspec/changes/board-banner-kicker-case/specs/board-banner-kicker-case/spec.md#requirement-a-board-dashboard-banners-kicker-is-in-sentence-case */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-banner-widget__kicker {
+	--nldesign-component-paragraph-font-size: 13px;
+	--nldesign-component-paragraph-font-weight: 700;
+	font-size: 13px;
+	font-weight: 700;
+	letter-spacing: 0;
+	text-transform: none;
+}
+
 /* ---- A workspace filter form (CnWorkspaceFilterWidget) ----------------- */
 /* The boards draw the form's field and its load button 40px tall, the button
    16px in at both sides (DqTermijnen "Jaar" with "Rapport laden"); the form
@@ -647,6 +661,13 @@
 	--button-size: 34px;
 }
 
+/* Two buttons in a card's title row stand 8px apart (DqZaakContact "Live
+   gesprek", DqZaakEmail "Mail koppelen" / "Mail opstellen").
+   @spec openspec/changes/board-card-header-actions-gap/specs/board-card-header-actions-gap/spec.md#requirement-a-board-cards-title-row-buttons-stand-8px-apart */
+.cn-look-board .cn-widget-wrapper__actions:not(.cn-look-nextcloud *) {
+	gap: 8px;
+}
+
 /* A detail page marked `cardButtons: "regular"` draws them at the 40px
    control height: the case page's tab cards (DqZaakContact "Live gesprek",
    DqZaakHistorie, DqZaakBetrokkenen), where setting and case-type pages keep 34.
@@ -2335,6 +2356,32 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	font-weight: 600;
 }
 
+/* A row whose one action is outlined (`rowAction.variant: "outlined"`,
+   DqMijnTeam "Oppakken"): its title link reads as the row's title in the main
+   ink (the theme's link rule reads --nldesign-color-on-surface), and the
+   action is an outlined button sized to its label. Without the variant the
+   action keeps its 150px pill (DcMijnActies).
+   @spec openspec/changes/board-row-action-outlined/specs/board-row-action-outlined/spec.md#requirement-a-dashboard-rows-action-is-an-outlined-button */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__row--action:has(.cn-record-list__action--outlined) .cn-record-list__title--link {
+	--nldesign-color-on-surface: var(--color-main-text);
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__action--outlined {
+	--nldesign-color-on-surface: var(--color-main-text);
+	flex: none;
+	padding: 0 12px;
+	border: 1px solid var(--cn-board-control-border);
+	border-radius: 8px;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__action--outlined:hover,
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__action--outlined:focus-visible {
+	background: var(--color-background-hover);
+}
+
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__meta {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;

package/src/utils/resolveFilterTokens.js

@@ -43,6 +43,9 @@
  *  - `@object.<field>`    → a field off the current detail-page object (needs `ctx`)
  *  - `@workspace.<key>`   → a value off the page-level workspace context (needs `ctx.workspace`)
  *  - `@config.<key>`      → a value off the page-level app config (needs `ctx.config`)
+ *  - `@context.<name>.<path>` → a value off a record the detail page reads beside
+ *                           the loaded one (needs `ctx.context`); left as written
+ *                           while that record is not read
  *
  * `@objectId` / `@object.<field>` are OBJECT-CONTEXT tokens: they resolve only
  * when a `ctx` `{ objectId, object }` is supplied (a detail page provides it via
@@ -75,6 +78,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 // userGroupsPeek, not widgetVisibility: that one imports @nextcloud/axios, and
 // this resolver runs on public pages and in node (see userGroupsPeek.js).
 import { peekMyTeam } from './myTeam.js'
+import { readPath } from './readPath.js'
 import { TODAY_DELTA_RE } from './sentinelTokens.js'
 import { peekCurrentUserGroups } from './userGroupsPeek.js'
 
@@ -195,6 +199,11 @@ export function resolveFilterValue(v, ctx) {
 		}
 		return v
 	}
+	if (v.startsWith('@context.')) {
+		// @spec openspec/changes/files-second-line-fields/specs/files-second-line-fields/spec.md#requirement-widget-props-can-read-the-detail-pages-context-records
+		const found = ctx && ctx.context ? readPath(ctx.context, v.slice('@context.'.length)) : undefined
+		return found === undefined ? v : found
+	}
 	if (v.startsWith('@workspace.')) {
 		// A trailing `?` marks the token OPTIONAL: when unset the caller drops the
 		// filter key (show all) instead of waiting (see hasUnresolvedTokens /

package/src/utils/sentinelTokens.js

@@ -188,7 +188,7 @@ export const SENTINEL_VOCABULARY = Object.freeze({
 		members: ['@subject.<field>'],
 	},
 	context: {
-		resolver: 'CnDetailPage visibilityContext (detailWidgetVisibility), read by a grid widget\'s or a tab\'s visibleWhen',
+		resolver: 'CnDetailPage visibilityContext (detailWidgetVisibility), read by a grid widget\'s or a tab\'s visibleWhen, and by a widget\'s props (CnDetailWidgetHost)',
 		description: 'A record the detail page reads beside the loaded one, named in `config.visibilityContext` (a case\'s case type). A `visibleWhen` field reads it as `@context.<name>.<field>`, dot paths allowed (`@context.caseType.category`).',
 		members: ['@context.<name>.<field>'],
 	},