@conduction/nextcloud-vue 2.142.0 → 2.144.0

package/l10n/en.json

@@ -1706,6 +1706,12 @@
     "expires {date}": "expires {date}",
     "Loading …": "Loading …",
     "Reorder {item}: drag, or press the up and down arrow keys": "Reorder {item}: drag, or press the up and down arrow keys",
+    "Board {name}": "Board {name}",
+    "list {name}": "list {name}",
+    "Tentative": "Tentative",
+    "Confirmed": "Confirmed",
+    "Cancelled": "Cancelled",
+    "{start} until {end}": "{start} until {end}",
     "No contacts linked": "No contacts linked",
     "No relations yet": "No relations yet",
     "Period": "Period",

package/l10n/nl.json

@@ -1910,7 +1910,7 @@
     "Now": "Nu",
     "Tell me above a number": "Melden vanaf een aantal",
     "Threshold": "Grens",
-    "A message to you when there are {threshold} or more": "Bericht aan u als er {threshold} of meer zijn",
+    "A message to you when there are {threshold} or more": "Bericht aan u als er {threshold} of meer open zijn",
     "Save this search or open a saved one to set an alert on it.": "Sla deze zoekopdracht op of open een opgeslagen zoekopdracht om er een melding op te zetten.",
     "The alert could not be saved.": "De melding kon niet worden opgeslagen.",
     "Your exports could not be loaded.": "Uw exports konden niet worden geladen.",
@@ -1919,6 +1919,12 @@
     "Made {date}": "Gemaakt {date}",
     "expires {date}": "verloopt {date}",
     "Reorder {item}: drag, or press the up and down arrow keys": "{item} verplaatsen: slepen, of de pijltoetsen omhoog en omlaag",
+    "Board {name}": "Bord {name}",
+    "list {name}": "lijst {name}",
+    "Tentative": "Voorlopig",
+    "Confirmed": "Bevestigd",
+    "Cancelled": "Geannuleerd",
+    "{start} until {end}": "{start} tot {end}",
     "No contacts linked": "Geen contacten gekoppeld",
     "No relations yet": "Nog geen relaties",
     "Period": "Periode",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.142.0",
+  "version": "2.144.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionDialog/CnActionDialog.vue

@@ -191,6 +191,7 @@ import CircleOutline from 'vue-material-design-icons/CircleOutline.vue'
 import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
 import CnFormField from '../CnFormField/CnFormField.vue'
 import { fetchEndpointSource, interpolateUrlTokens } from '../../composables/useEndpointSource.js'
+import { BUILT_IN_FORMATTERS } from '../../utils/builtInFormatters.js'
 import { fillTemplate } from '../../utils/fillTemplate.js'
 import { readPath } from '../../utils/readPath.js'
 import { CnDialog } from '../CnDialog/index.js'
@@ -219,7 +220,8 @@ let reasonSeq = 0
  *   `eyebrow` a template filled from the record ("Close off · {identifier}").
  * - `summary`: `{ source?, title, meta?, badge?, icon? }`: templates filled from
  *   the record (`source` an endpointSource to read it from, else `object`).
- * - `facts`: `[{ title?, items: [{ label, value }] }]`, `value` a template.
+ * - `facts`: `[{ title?, items: [{ label, value }] }]`, `value` a template; a
+ *   `{path|<formatter>}` token reads through the built-in and app formatters.
  * - `checklist`: `{ title?, source, itemsPath?, labels?, required? }`: items
  *   `{ id, met, label?, detail? }` read from `source`; `labels[id]` gives an
  *   item's `{ label, detail?, unmetDetail? }`; the ids in `required` must be
@@ -262,6 +264,8 @@ export default {
 		cnTranslate: { default: () => (key) => key },
 		/** The page's pre-bound action dispatcher (CnPageRenderer), for `confirm.action`. */
 		cnDispatchAction: { default: null },
+		/** The app's named formatters (CnAppRoot), for `{path|<formatter>}` in a template. */
+		cnFormatters: { default: () => ({}) },
 	},
 
 	props: {
@@ -594,7 +598,8 @@ export default {
 			if (typeof template !== 'string' || template === '') {
 				return ''
 			}
-			return fillTemplate(this.cnTranslate(template), row || this.record || {}).trim()
+			const formatters = { ...BUILT_IN_FORMATTERS, ...(this.cnFormatters || {}) }
+			return fillTemplate(this.cnTranslate(template), row || this.record || {}, new Date(), { formatters }).trim()
 		},
 
 		/**
@@ -836,6 +841,7 @@ export default {
 .cn-action-dialog__summary-text strong {
 	font-size: 15px;
 	font-weight: 600;
+	line-height: 1.2;
 }
 
 .cn-action-dialog__summary-text .cn-action-dialog__muted {
@@ -949,7 +955,25 @@ export default {
 	padding: 12px 14px;
 	border: 2px solid var(--color-primary-element);
 	border-radius: var(--border-radius-element, 8px);
-	background: var(--color-primary-element-light);
+	background: var(--color-main-background);
+}
+
+/* The box sits at the card's inset, 12px before the label, the label on
+   its first line (DqArchiveren "Sanne de Vries laten weten ..."):
+   NcCheckboxRadioSwitch pads its row and centres a 34px target. */
+.cn-action-dialog__checkbox :deep(.checkbox-content) {
+	padding: 0;
+	gap: 12px;
+	align-items: flex-start;
+	min-height: 0;
+}
+
+.cn-action-dialog__checkbox :deep(.checkbox-content__icon) {
+	margin: 0;
+}
+
+.cn-action-dialog__checkbox :deep(.checkbox-radio-switch__input) {
+	min-height: 0;
 }
 
 .cn-action-dialog__checkbox-text {
@@ -961,6 +985,7 @@ export default {
 .cn-action-dialog__checkbox-label {
 	font-size: 15px;
 	font-weight: 600;
+	line-height: 1.2;
 }
 
 .cn-action-dialog__checkbox .cn-action-dialog__muted {

package/src/components/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -2,7 +2,7 @@
 	<div
 		class="cn-admin-settings-shell"
 		:class="[ownLookClass, sectionColumns ? `cn-admin-settings-shell--columns-${sectionColumns}` : '']"
-		:style="versionTitleSize ? { '--cn-board-version-title-size': `${versionTitleSize}px` } : null">
+		:style="shellStyle">
 		<!-- Names a development, test or acceptance environment; cannot be dismissed. Production shows nothing. -->
 		<CnEnvironmentBanner v-if="environmentName" :environment="environmentName" />
 
@@ -780,6 +780,16 @@ export default {
 			type: Number,
 			default: 0,
 		},
+
+		/**
+		 * The board look's gap in px between a card's title and its
+		 * description, when the app's board draws it other than 4px; the
+		 * content follows 10px further (DqBeheerinstellingen 6, so 16).
+		 */
+		descGap: {
+			type: Number,
+			default: 0,
+		},
 	},
 
 	emits: ['update', 'reimported', 'reimport-error', 'tab-change'],
@@ -818,6 +828,23 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The board look sizes an app's board sets on the shell
+		 * (`versionTitleSize`, `descGap`), as CSS custom properties.
+		 *
+		 * @return {object|null} The style, or null when none is set.
+		 */
+		shellStyle() {
+			const style = {}
+			if (this.versionTitleSize) {
+				style['--cn-board-version-title-size'] = `${this.versionTitleSize}px`
+			}
+			if (this.descGap) {
+				style['--cn-board-settings-desc-gap'] = `${this.descGap}px`
+			}
+			return Object.keys(style).length > 0 ? style : null
+		},
+
 		/**
 		 * The tabs that have an id and a label.
 		 *

package/src/components/CnAiCompanion/CnAiChatPanel.vue

@@ -310,6 +310,7 @@
 						:disabled="streamState.isStreaming"
 						:placeholder="inputPlaceholder"
 						:sendLabel="sendLabel"
+						:stacked="titled"
 						:chatAppId="chatAppId"
 						:speechInputEngine="speechPolicy.inputEngine"
 						:dictationSilenceTimeout="speechPolicy.silenceTimeout"
@@ -1599,10 +1600,21 @@ export default {
 }
 
 .cn-ai-chat-window--titled .cn-ai-chat-window__input {
+	padding: 0;
+	border-top: 0;
 	border-radius: 0;
 	background: transparent;
 }
 
+/* In a card the panel's body takes the card's 16px 18px inset. */
+.cn-ai-chat-window--titled .cn-ai-chat-window__messages {
+	padding: 16px 18px;
+}
+
+.cn-ai-chat-window--titled .cn-ai-chat-window__note {
+	margin: 0 18px 16px;
+}
+
 .cn-ai-chat-window__input {
 	flex: 0 0 auto;
 	padding: 8px;

package/src/components/CnAiCompanion/CnAiInput.vue

@@ -23,7 +23,7 @@
     for the parent's async request to resolve before clearing either).
 -->
 <template>
-	<div class="cn-ai-input" data-testid="cn-ai-input">
+	<div class="cn-ai-input" :class="{ 'cn-ai-input--stacked': stacked }" data-testid="cn-ai-input">
 		<NcNoteCard
 			v-if="uploadError"
 			type="error"
@@ -298,6 +298,15 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * The narrow layout of a card: the text box and the send button on the
+		 * first line, dictation and attach on a line under it.
+		 */
+		stacked: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Backend app id the attach control uploads files to
 		 * (`POST /index.php/apps/{chatAppId}/api/chat/attachments`). See
@@ -1184,6 +1193,28 @@ export default {
 	align-items: flex-end;
 }
 
+/* `stacked`: in a card the box keeps the line, dictation and attach wrap
+   under it (DqZaakAssistent "Vraag iets over deze zaak" + "Vragen"). */
+.cn-ai-input--stacked {
+	padding: 12px 18px;
+}
+
+.cn-ai-input--stacked .cn-ai-input__row {
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+.cn-ai-input--stacked .cn-ai-input__textarea {
+	order: -2;
+	flex: 1 1 calc(100% - 104px);
+	min-width: 0;
+	min-height: 40px;
+}
+
+.cn-ai-input--stacked .cn-ai-input__send-button {
+	order: -1;
+}
+
 .cn-ai-input__file-input {
 	display: none;
 }

package/src/components/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -30,13 +30,15 @@
 			<li
 				v-for="entry in displayedEntries"
 				:key="entry.id"
-				class="cn-audit-card__row">
+				class="cn-audit-card__row"
+				:class="{ 'cn-audit-card__row--stacked': layout === 'stacked' }">
 				<div class="cn-audit-card__row-head">
 					<strong class="cn-audit-card__action">{{ formatAction(entry) }}</strong>
-					<span class="cn-audit-card__when">{{ formatWhen(entry) }}</span>
+					<span v-if="layout !== 'stacked'" class="cn-audit-card__when">{{ formatWhen(entry) }}</span>
 				</div>
 				<div class="cn-audit-card__row-body">
-					<span class="cn-audit-card__actor">{{ formatActor(entry) }}</span>
+					<span v-if="layout === 'stacked'" class="cn-audit-card__when" data-testid="cn-audit-card-when-below">{{ stackedLine(entry) }}</span>
+					<span v-else class="cn-audit-card__actor">{{ formatActor(entry) }}</span>
 					<span
 						v-if="entry.authorized === false"
 						class="cn-audit-card__refused"
@@ -64,8 +66,10 @@ import { NcLoadingIcon } from '@nextcloud/vue'
 import { markRaw } from 'vue'
 import History from 'vue-material-design-icons/History.vue'
 import CnDetailCard from '../CnDetailCard/CnDetailCard.vue'
+import { formatBoardDate, formatTimeOfDay } from '../../utils/boardDate.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
 import { leafSourceUrl } from '../../utils/leafSourceUrl.js'
+import { userDisplayName } from '../../utils/userDisplayName.js'
 import { userLocale } from '../../utils/userLocale.js'
 
 /**
@@ -154,6 +158,12 @@ export default {
 
 		/** Maximum rows to render. */
 		maxDisplay: { type: Number, default: 5 },
+		/**
+		 * `stacked` (DqTaak "Historie"): the action, then one muted line under
+		 * it with the moment ("6 okt 09:05") and who, when the action does not
+		 * already name them. Default: the moment beside the action, who under it.
+		 */
+		layout: { type: String, default: '' },
 		/**
 		 * Actions the card leaves out (case-insensitive), such as `['read']`
 		 * for a history of what changed. It then reads more entries than it
@@ -440,7 +450,27 @@ export default {
 		 * @return {string} Who did it, by name where the entry carries one.
 		 */
 		actorName(entry) {
-			return entry.actorDisplayName || entry.actor || entry.userId || entry.user || ''
+			if (entry.actorDisplayName) {
+				return entry.actorDisplayName
+			}
+			const id = entry.actor || entry.userId || entry.user || ''
+			// A person's user id reads as their display name once it is known.
+			return (id && (!entry.performerType || entry.performerType === 'user') && userDisplayName(String(id))) || id
+		},
+
+		/**
+		 * The muted line of a stacked row: the moment in the board's short
+		 * form ("6 okt 09:05") and who, unless the action names them already.
+		 *
+		 * @param {object} entry The entry.
+		 * @return {string} The line.
+		 * @spec openspec/changes/audit-card-stacked-rows/specs/audit-trail/spec.md#requirement-an-audit-row-can-put-its-moment-under-the-action
+		 */
+		stackedLine(entry) {
+			const raw = entry.creationDateTime || entry.created || entry.timestamp
+			const date = raw ? new Date(raw) : null
+			const when = date && !Number.isNaN(date.getTime()) ? `${formatBoardDate(date)} ${formatTimeOfDay(date)}` : ''
+			return [when, this.formatActor(entry)].filter((part) => part !== '').join(' · ')
 		},
 
 		/**

package/src/components/CnAuditTrailWidget/CnAuditTrailWidget.vue

@@ -16,6 +16,7 @@
 			:scope="resolvedScope"
 			:title="resolvedTitle"
 			:maxDisplay="resolvedMaxDisplay"
+			:layout="content && typeof content.layout === 'string' ? content.layout : ''"
 			:excludeActions="resolvedExcludeActions"
 			:actionLabels="actionLabels"
 			:valueLabels="valueLabels"

package/src/components/CnChecklistRunWidget/CnChecklistRunWidget.vue

@@ -1195,18 +1195,25 @@ export default {
 }
 
 .cn-checklist-run__legend {
+	font-size: 15px;
 	font-weight: 600;
+	line-height: 1.2;
 	padding: 0 4px;
 }
 
 .cn-checklist-run__help {
 	color: var(--color-text-maxcontrast);
+	font-size: 14px;
 	margin: 0;
 }
 
+/* An option reads as text, not as a field label (a theme makes every label
+   bold); 15px as the board draws it (DqInspectie). */
 .cn-checklist-run__choice {
 	align-items: center;
 	display: flex;
+	font-size: 15px;
+	font-weight: 400;
 	gap: 10px;
 	min-height: 34px;
 }
@@ -1225,6 +1232,7 @@ export default {
 }
 
 .cn-checklist-run__group {
+	font-size: 14px;
 	font-weight: 600;
 	margin: 0;
 }

package/src/components/CnChoiceCards/CnChoiceCards.vue

@@ -622,6 +622,7 @@ export default {
 .cn-choice-cards__row-title {
 	font-size: 15px;
 	font-weight: 600;
+	line-height: 1.2;
 }
 
 /* Regular weight on the span itself: a theme that sets every label bold

package/src/components/CnConversationThread/CnConversationThread.vue

@@ -17,9 +17,11 @@
 					class="cn-conversation-thread__title">
 					{{ title }}
 				</component>
-				<p v-if="subtitle" class="cn-conversation-thread__subtitle" data-testid="cn-conversation-subtitle">
+				<!-- A div, not a <p>: a theme that sets every paragraph's size with
+				     !important would otherwise override the 14px subtitle. -->
+				<div v-if="subtitle" class="cn-conversation-thread__subtitle" data-testid="cn-conversation-subtitle">
 					{{ subtitle }}
-				</p>
+				</div>
 			</div>
 			<div v-if="$slots['header-actions']" class="cn-conversation-thread__header-actions">
 				<!-- @slot header-actions Buttons beside the title, for example "Log contact". -->
@@ -633,6 +635,7 @@ export default {
 .cn-conversation-thread__subtitle {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
+	line-height: normal;
 	margin: 0;
 }
 

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -86,6 +86,7 @@
 		<CnObjectDataWidget
 			v-else-if="isData && schemaObject"
 			:title="resolvedTitle"
+			:subtitle="widgetSubtitle"
 			:chromeless="isBare"
 			:showActions="!isBare && actionsShown"
 			:icon="widget.icon || null"

package/src/components/CnEventsCard/CnEventsCard.vue

@@ -28,9 +28,12 @@
 				:key="keyOf(event, index)"
 				class="cn-events-card__event"
 				data-testid="cn-events-card-event">
-				<span class="cn-events-card__summary">{{ summaryOf(event) }}</span>
-				<span class="cn-events-card__when">{{ whenOf(event) }}</span>
-				<span v-if="event.location" class="cn-events-card__where">{{ event.location }}</span>
+				<span v-if="dayOf(event)" class="cn-events-card__day" aria-hidden="true">{{ dayOf(event) }}</span>
+				<span class="cn-events-card__text">
+					<span class="cn-events-card__summary">{{ summaryOf(event) }}</span>
+					<span class="cn-events-card__when">{{ whenOf(event) }}</span>
+					<span v-if="event.location" class="cn-events-card__where">{{ event.location }}</span>
+				</span>
 			</li>
 		</ul>
 		<p v-else class="cn-events-card__muted" data-testid="cn-events-card-empty">
@@ -292,6 +295,15 @@ export default {
 			return summary === '' ? t('nextcloud-vue', 'Appointment') : summary
 		},
 
+		/**
+		 * @param {object} event The event.
+		 * @return {string} The day of the month it starts on, '' when it has no readable start.
+		 */
+		dayOf(event) {
+			const parsed = new Date(String(event?.dtstart ?? '').trim())
+			return Number.isNaN(parsed.getTime()) ? '' : String(parsed.getDate())
+		},
+
 		/**
 		 * @param {object} event The event.
 		 * @return {string} When it is: its start and end, or whichever it has.
@@ -333,8 +345,7 @@ function formatMoment(value) {
 
 .cn-events-card__event {
 	display: flex;
-	flex-direction: column;
-	gap: 2px;
+	gap: 12px;
 	padding-bottom: 8px;
 	border-bottom: 1px solid var(--color-border);
 }
@@ -344,6 +355,17 @@ function formatMoment(value) {
 	border-bottom: none;
 }
 
+.cn-events-card__day {
+	display: none;
+}
+
+.cn-events-card__text {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
 .cn-events-card__summary {
 	font-weight: 600;
 }

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -38,7 +38,7 @@
 		     Files app and its plugins registered for this folder (a new folder,
 		     a template, a file request) beside a plain upload. -->
 		<div class="cn-files-browser__bar">
-			<NcBreadcrumbs class="cn-files-browser__crumbs">
+			<NcBreadcrumbs class="cn-files-browser__crumbs" :class="{ 'cn-files-browser__crumbs--at-root': atRoot }">
 				<!-- The whole trail from the user's files root, as the Files app
 				     draws it. A crumb above the browser's root links into the Files
 				     app (the browser never leaves its root); the root and everything
@@ -1471,6 +1471,19 @@ export default {
 			return crumbsFor(this.rootPath, this.currentPath, this.rootLabel)
 		},
 
+		/**
+		 * Whether the open folder is the browser's root: the trail then ends on
+		 * the root itself (the board look draws no trail there).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/board-files-root-crumb/specs/board-files-root-crumb/spec.md#requirement-the-board-files-bar-draws-no-trail-at-the-root
+		 */
+		atRoot() {
+			const root = String(this.rootPath || '/').replace(/\/+$/, '') || '/'
+			const last = this.crumbs[this.crumbs.length - 1]
+			return Boolean(last) && last.path === root
+		},
+
 		/**
 		 * The children in the chosen order, folders first the way the Files app
 		 * lists them.
@@ -2165,7 +2178,8 @@ export default {
 			const object = {
 				...entry,
 				name: node.basename,
-				modified: node.mtime,
+				// A template drops an object value, so the Date is handed over as ISO text.
+				modified: node.mtime instanceof Date ? node.mtime.toISOString() : node.mtime,
 				size: this.formatSize(node.size),
 				type: this.typeLabelOf(node),
 				...(owner ? { owner } : {}),
@@ -2768,7 +2782,8 @@ export default {
 							}
 						})
 						.filter((field) => field.value !== null && field.value !== undefined && field.value !== ''),
-					actions: (Array.isArray(card.actions) ? card.actions : []).filter((action) => action && action.id),
+					actions: (Array.isArray(card.actions) ? card.actions : [])
+						.filter((action) => action && action.id && hostActionApplies(action, node, this.rowValueOf(node))),
 				}))
 		},
 
@@ -3064,7 +3079,18 @@ export default {
 		 * @spec openspec/changes/files-browser-hosts-a-documents-list/specs/files-browser/spec.md
 		 */
 		hostActionsFor(node) {
-			return this.rowActions.filter((action) => hostActionApplies(action, node))
+			return this.rowActions.filter((action) => hostActionApplies(action, node, this.rowValueOf(node)))
+		},
+
+		/**
+		 * A reader of the host's row fields for one file, for `visibleIf.row`.
+		 *
+		 * @param {object} node The file.
+		 * @return {(key: string) => unknown} `(key) => value` over the row the host gave for the file.
+		 * @spec openspec/changes/files-browser-action-visible-if-row/specs/files-browser/spec.md#requirement-a-host-action-can-be-offered-by-a-field-of-the-files-row
+		 */
+		rowValueOf(node) {
+			return (key) => fileColumnValue({ key, source: 'row' }, node, this.resolvedRowData)
 		},
 
 		/**
@@ -3623,6 +3649,19 @@ export default {
 	width: auto;
 }
 
+/* The row button and the row menu stand side by side on one line, not
+   stacked (DqZaakDocumenten: Beoordelen, then the menu, 14px apart).
+   @spec openspec/changes/files-row-button-beside-menu/specs/files-row-button-beside-menu/spec.md#requirement-a-files-row-button-stands-beside-the-row-menu */
+.cn-files-browser__col-actions > .cn-files-browser__row-button,
+.cn-files-browser__col-actions > .cn-files-browser__row-menu {
+	display: inline-flex;
+	vertical-align: middle;
+}
+
+.cn-files-browser__col-actions > .cn-files-browser__row-button + .cn-files-browser__row-menu {
+	margin-inline-start: 14px;
+}
+
 .cn-files-browser__col-name {
 	min-width: 0;
 }

package/src/components/CnFilesBrowser/filesBrowser.js

@@ -284,15 +284,19 @@ export function indexRowData(data, { path = '', key = 'fileId' } = {}) {
  *
  * `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. An action with
- * `when` is offered only while `when` is `true`.
+ * `/*` names the whole family; `visibleIf.row` maps fields of the host's row
+ * for the file to the value each must have (compared strictly, so `true` is
+ * not `"true"`). Every condition named must hold. An action without
+ * `visibleIf` is offered on every file, as before. An action with `when` is
+ * offered only while `when` is `true`.
  *
  * @param {object} action The declared action.
  * @param {object} node The file (`basename`, `mime`).
+ * @param {((key: string) => unknown)|null} rowValue Reads a field of the host's row for the file; without it a `row` condition fails.
  * @return {boolean} True when the action belongs on this file.
+ * @spec openspec/changes/files-browser-action-visible-if-row/specs/files-browser/spec.md#requirement-a-host-action-can-be-offered-by-a-field-of-the-files-row
  */
-export function hostActionApplies(action, node) {
+export function hostActionApplies(action, node, rowValue = null) {
 	// `when`: the action applies only while it is true (a case type flag).
 	// @spec openspec/changes/files-review-row-when/specs/files-review-row-when/spec.md#requirement-a-files-browser-entry-can-apply-only-when-a-condition-holds
 	if (action && typeof action === 'object' && 'when' in action && action.when !== true) {
@@ -324,5 +328,14 @@ export function hostActionApplies(action, node) {
 			return false
 		}
 	}
+	if (condition.row && typeof condition.row === 'object') {
+		if (typeof rowValue !== 'function') {
+			return false
+		}
+		const holds = Object.entries(condition.row).every(([key, wanted]) => rowValue(key) === wanted)
+		if (!holds) {
+			return false
+		}
+	}
 	return true
 }

package/src/components/CnFilesBrowser/filesBrowserColumns.js

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { isAppInstalled } from '../../utils/appInstalled.js'
+
 /**
  * The built-in columns a host may name by string, and what each one reads.
  *
@@ -53,12 +55,26 @@ export function isBuiltInFileColumn(name) {
 	return typeof name === 'string' && Object.hasOwn(BUILT_IN_FILE_COLUMNS, name)
 }
 
+/**
+ * Whether the app a column leans on is enabled: one app id, or a list of which
+ * any one will do. A column without `requiredApp` always applies.
+ *
+ * @param {(string|string[]|undefined)} requiredApp The app id(s).
+ * @return {boolean} True when the column applies.
+ * @spec openspec/changes/files-column-required-app/specs/files-column-required-app/spec.md#requirement-a-file-column-can-require-another-app
+ */
+function requiredAppPresent(requiredApp) {
+	const ids = (Array.isArray(requiredApp) ? requiredApp : [requiredApp]).filter((id) => typeof id === 'string' && id !== '')
+	return ids.length === 0 || ids.some((id) => isAppInstalled(id))
+}
+
 /**
  * Resolve a host's `columns` declaration into column objects.
  *
  * A string names a built-in. An object declares its own: `key`, `label`,
  * `source` (`node`, `attribute` or `row`), `attribute`, `formatter` and
- * `sortable`. An entry naming an unknown built-in is dropped here and refused
+ * `sortable`, and `requiredApp` (an app id, or a list of which any one will
+ * do; without it the column is left out). An entry naming an unknown built-in is dropped here and refused
  * by the manifest validator, so an author hears about it at authoring time
  * rather than finding a column missing at runtime.
  *
@@ -83,6 +99,9 @@ export function normaliseFileColumns(columns) {
 		if ('when' in entry && entry.when !== true) {
 			return
 		}
+		if (!requiredAppPresent(entry.requiredApp)) {
+			return
+		}
 		if (isBuiltInFileColumn(entry.key) && entry.source === undefined) {
 			out.push({ ...BUILT_IN_FILE_COLUMNS[entry.key], ...entry, builtIn: true })
 			return