@conduction/nextcloud-vue 2.56.0-beta.36 → 2.56.0-beta.38

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -78,6 +78,7 @@ import { resolveObjectOpType } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { safeCurrencyCode } from '../../utils/formatMetric.js'
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 /**
  * Nice-ceiling ladder. Deliberately fine-grained: a coarse one (1 / 2 / 5 / 10)
@@ -1636,16 +1637,16 @@ export default {
 			const year = d.getFullYear() === thisYear ? {} : { year: 'numeric' }
 			switch (String(interval || '').toLowerCase()) {
 				case 'minute':
-					return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+					return d.toLocaleString(userLocale(), { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
 				case 'hour':
-					return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit' })
+					return d.toLocaleString(userLocale(), { month: 'short', day: 'numeric', hour: '2-digit' })
 				case 'day':
 				case 'week':
-					return d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', ...year })
+					return d.toLocaleDateString(userLocale(), { day: 'numeric', month: 'short', ...year })
 				case 'year':
-					return d.toLocaleDateString(undefined, { year: 'numeric' })
+					return d.toLocaleDateString(userLocale(), { year: 'numeric' })
 				default:
-					return d.toLocaleDateString(undefined, { month: 'short', year: '2-digit' })
+					return d.toLocaleDateString(userLocale(), { month: 'short', year: '2-digit' })
 			}
 		},
 

package/src/components/CnCollectivePagePicker/CnCollectivePagePicker.vue

@@ -112,6 +112,7 @@ import { translate as t } from '@nextcloud/l10n'
 import { NcButton, NcDialog, NcEmptyContent, NcLoadingIcon, NcNoteCard, NcSelect, NcTextField } from '@nextcloud/vue'
 import BookOpenPageVariant from 'vue-material-design-icons/BookOpenPageVariant.vue'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 export default {
 	name: 'CnCollectivePagePicker',
@@ -267,7 +268,7 @@ export default {
 			if (Number.isNaN(d.getTime())) {
 				return ''
 			}
-			return d.toLocaleDateString(undefined, { dateStyle: 'medium' })
+			return d.toLocaleDateString(userLocale(), { dateStyle: 'medium' })
 		},
 
 		confirm() {

package/src/components/CnConversationThread/CnConversationThread.vue

@@ -86,6 +86,7 @@ import axios from '@nextcloud/axios'
 import { translate as t } from '@nextcloud/l10n'
 import { NcButton } from '@nextcloud/vue'
 import { prefixUrl } from '../../utils/headers.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 let conversationThreadUid = 0
 
@@ -299,7 +300,7 @@ export default {
 			if (!looksLikeDate || Number.isNaN(date.getTime())) {
 				return { label: String(value), datetime: '' }
 			}
-			const label = date.toLocaleString(undefined, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
+			const label = date.toLocaleString(userLocale(), { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
 			return { label, datetime: date.toISOString() }
 		},
 

package/src/components/CnCountdownWidget/CnCountdownWidget.vue

@@ -29,6 +29,7 @@ import { inject } from 'vue'
 import CnWidgetIcon from '../CnWidgetGrid/CnWidgetIcon.vue'
 import { getByPath } from '../../composables/useEndpointSource.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 const MS_PER_DAY = 24 * 60 * 60 * 1000
 
@@ -248,7 +249,7 @@ export default {
 			if (!this.targetDate || this.content?.showDate === false) {
 				return ''
 			}
-			return this.targetDate.toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })
+			return this.targetDate.toLocaleDateString(userLocale(), { day: 'numeric', month: 'long', year: 'numeric' })
 		},
 
 		/**

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -395,6 +395,7 @@
 					<CnStatsBlockWidget
 						v-bind="getStatsBlockProps(item)"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:data-source="getWidgetDataSource(item)" />
 				</CnWidgetWrapper>
 				<CnWidgetWrapper
@@ -420,7 +421,7 @@
 						:is="registryRenderer(item)"
 						:widgetId="item.widgetId"
 						:content="registryWidgetBindings(item)"
-						v-bind="registryWidgetBindings(item)"
+						v-bind="{ ...registryWidgetBindings(item), ...containerBindings(item) }"
 						@header="onWidgetHeader(item, $event)" />
 				</CnWidgetWrapper>
 				<CnWidgetWrapper
@@ -433,6 +434,7 @@
 				<CnWidgetWrapper
 					v-else
 					:title="getWidgetTitle(item)"
+					:eyebrow="getWidgetEyebrow(item)"
 					:showTitle="false"
 					:showRefresh="false">
 					<div class="cn-dashboard-page__unknown">
@@ -494,6 +496,7 @@
 				<CnWidgetWrapper
 					v-if="missingRequiredApp(item)"
 					:title="getWidgetTitle(item)"
+					:eyebrow="getWidgetEyebrow(item)"
 					:showTitle="widgetShowTitle(item)">
 					<!-- Compact on purpose: a two-row tile is about 150px, less
 					     a title row. NcEmptyContent's 64px icon, 20px name,
@@ -532,6 +535,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -613,6 +617,7 @@
 						:widgetId="item.widgetId"
 						:class="{ 'cn-dashboard-page__chart-fit': isChartFitted(item) }"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -691,6 +696,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -718,6 +724,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -757,6 +764,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -782,6 +790,7 @@
 					<CnWidgetWrapper
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
+						:eyebrow="getWidgetEyebrow(item)"
 						:showTitle="widgetShowTitle(item)"
 						:showActions="widgetShowActions(item)"
 						:showRefresh="getWidgetShowRefresh(item)"
@@ -873,7 +882,7 @@
 							:is="registryRenderer(item)"
 							:widgetId="item.widgetId"
 							:content="registryWidgetBindings(item)"
-							v-bind="registryWidgetBindings(item)"
+							v-bind="{ ...registryWidgetBindings(item), ...containerBindings(item) }"
 							@header="onWidgetHeader(item, $event)" />
 					</CnWidgetWrapper>
 				</template>
@@ -882,6 +891,7 @@
 				<CnWidgetWrapper
 					v-else
 					:title="getWidgetTitle(item)"
+					:eyebrow="getWidgetEyebrow(item)"
 					:showTitle="widgetShowTitle(item)"
 					:showRefresh="false">
 					<div class="cn-dashboard-page__unknown">
@@ -974,6 +984,7 @@ import { pageViews } from '../../mixins/pageViews.js'
 import { mergeUserLayout, resolveUserLayoutApi } from '../../store/plugins/dashboardLayouts.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { contentHeaderLink } from '../../utils/contentHeaderLink.js'
+import { userLocale } from '../../utils/userLocale.js'
 import { compareVisibleWhen, evaluateWorkspaceCondition, isWorkspaceCondition, readVisibleWhenValue } from '../../utils/visibleWhen.js'
 import { canonicalWidgetType } from '../../utils/widgetTypeAliases.js'
 import { CnActionButtons } from '../CnActionButtons/index.js'
@@ -2863,7 +2874,7 @@ export default {
 				if (!d) {
 					return ''
 				}
-				return d.toLocaleDateString(undefined, {
+				return d.toLocaleDateString(userLocale(), {
 					day: 'numeric',
 					month: 'short',
 					...(needsYear ? { year: 'numeric' } : {}),
@@ -2944,6 +2955,7 @@ export default {
 			return {
 				widgetId: item.widgetId,
 				title: this.getWidgetTitle(item),
+				eyebrow: this.getWidgetEyebrow(item),
 				showTitle: this.widgetShowTitle(item),
 				showActions: this.widgetShowActions(item),
 				showRefresh: this.getWidgetShowRefresh(item),
@@ -3630,6 +3642,35 @@ export default {
 			return outcome ? { ...content, conditionOutcome: outcome } : content
 		},
 
+		/**
+		 * What a container widget (registry `container`, such as `tabs`) needs
+		 * beside its content: the page's widget definitions, so its tabs find
+		 * the widgets they name, and the consumer registry for custom child
+		 * types. Empty for every other widget, so a leaf gets no extra
+		 * attributes on its root.
+		 *
+		 * @param {object} item Layout item.
+		 * @return {object} The extra bindings.
+		 * @spec openspec/changes/dashboard-tabs-children/specs/dashboard-page/spec.md#requirement-a-tabs-widget-on-a-dashboard-renders-the-widgets-its-tabs-name
+		 */
+		containerBindings(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			if (!def || !def.type) {
+				return {}
+			}
+			const entry = getWidgetTypeEntry(def.type) || getWidgetTypeEntry(canonicalWidgetType(def.type))
+			if (!entry || entry.container !== true) {
+				return {}
+			}
+			const own = Array.isArray(this.widgets) ? this.widgets.filter(Boolean) : []
+			const fromView = this.activeView && Array.isArray(this.activeView.widgets) ? this.activeView.widgets.filter(Boolean) : []
+			return {
+				availableWidgets: [...own, ...fromView],
+				cnRegistry: this.cnRegistry || {},
+				surface: this.surface,
+			}
+		},
+
 		/**
 		 * A widget's content with the board's quiet collection footer: in the
 		 * board look a dashboard that drops the widget Actions menu
@@ -4002,6 +4043,21 @@ export default {
 			this.showWidgetConfig = false
 		},
 
+		/**
+		 * The line above a widget's title (`eyebrow` on the widget
+		 * definition: "Saldo per week" above "Prognose 13 weken"), through the
+		 * host translate, or '' for none.
+		 *
+		 * @param {object} item Layout item.
+		 * @return {string}
+		 * @spec openspec/changes/widget-title-eyebrow/specs/dashboard-page/spec.md#requirement-a-widget-card-can-carry-a-line-above-its-title
+		 */
+		getWidgetEyebrow(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			const eyebrow = def && typeof def.eyebrow === 'string' ? def.eyebrow : ''
+			return eyebrow ? this.effectiveTranslate(eyebrow) : ''
+		},
+
 		/**
 		 * The widget's title as AUTHORED — the untranslated manifest source
 		 * string — resolved by widget id rather than by item, so a descendant

package/src/components/CnDataMatrix/CnDataMatrix.vue

@@ -83,6 +83,7 @@
 </template>
 
 <script>
+import { userLocale } from '../../utils/userLocale.js'
 /**
  * CnDataMatrix — Inline-edit data grid for matrix-shaped data
  * (rows × columns). Each cell is click-to-edit; commits emit
@@ -239,7 +240,7 @@ export default {
 				if (!Number.isFinite(n)) {
 					return value
 				}
-				return n.toLocaleString()
+				return n.toLocaleString(userLocale())
 			}
 			return value
 		},

package/src/components/CnDetailPage/CnDetailHeaderChips.vue

@@ -58,6 +58,7 @@ import { useObjectStore } from '../../store/useObjectStore.js'
 import { resolveObjectOpType } from '../../utils/actionsDispatcher.js'
 import { isEmptyChipValue, isPastDate, normalizeHeaderFields, pickRefLabel, variantForColor } from '../../utils/headerFieldChips.js'
 import { schemaRefSlug } from '../../utils/schemaRefSlug.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 const DAY_MS = 86400000
 
@@ -239,7 +240,7 @@ export default {
 			try {
 				return new Intl.RelativeTimeFormat(this.locale(), { numeric: 'auto' }).format(days, 'day')
 			} catch {
-				return new Date(time).toLocaleDateString()
+				return new Date(time).toLocaleDateString(userLocale())
 			}
 		},
 

package/src/components/CnDetailPage/CnDetailPage.md

@@ -460,4 +460,4 @@ When the schema-driven fetch answers 404 the page shows a not-found state whose
 
 ### The board look
 
-`look` (String, default `''`): `nextcloud` or `board`; empty takes the app's look. `headerMeta` (String): the meta line on row 2 of the board header, a field template such as `via {channel}` (manifest `config.headerMeta`). `tabsLabel` (String): the accessible name of the tab list (manifest `config.tabsLabel`). `identifierField` (String): the field named in the last line of the History side card (manifest `config.identifierField`). See `docs/components/cn-detail-page.md`.
+`look` (String, default `''`): `nextcloud` or `board`; empty takes the app's look. `headerMeta` (String): the meta line on row 2 of the board header, a field template such as `via {channel}` (manifest `config.headerMeta`). `tabsLabel` (String): the accessible name of the tab list (manifest `config.tabsLabel`). `identifierField` (String): the field named in the last line of the History side card (manifest `config.identifierField`). `titleField` (String): the record field the header names the record by, such as an invoice number (manifest `config.titleField`); an empty value falls back to the display name. See `docs/components/cn-detail-page.md`.

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -2664,6 +2664,19 @@ export default {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * The record field the header names the record by (manifest
+		 * `config.titleField`, a dotted path such as `number`), as an invoice
+		 * page names the invoice number. An empty value falls back to the
+		 * display name. Empty (the default) changes nothing.
+		 *
+		 * @spec openspec/changes/detail-title-field/specs/detail-page/spec.md#requirement-a-detail-page-can-name-the-record-by-a-field
+		 */
+		titleField: {
+			type: String,
+			default: '',
+		},
 	},
 
 	emits: [
@@ -4102,10 +4115,10 @@ export default {
 		},
 
 		/**
-		 * The resolved record's human display name, drawn from the loaded
-		 * object via the same fallback chain the relation resolver uses:
-		 * `@self.name` → `name` / `title` / `displayName` → `firstName
-		 * lastName`. Empty string while the object is still loading or when no
+		 * The resolved record's human display name: the `titleField` value
+		 * when the page names one and it is filled, else the same fallback
+		 * chain the relation resolver uses: `@self.name` → `name` / `title` /
+		 * `displayName` → `firstName lastName`. Empty string while the object is still loading or when no
 		 * name-like field exists (a raw id is never used as a name — ADR-062).
 		 *
 		 * @return {string}
@@ -4115,6 +4128,12 @@ export default {
 			if (!obj || typeof obj !== 'object') {
 				return ''
 			}
+			if (this.titleField) {
+				const named = stageOf(obj, this.titleField)
+				if (named !== '') {
+					return named
+				}
+			}
 			const self = obj['@self'] || {}
 			const id = this.objectId !== null && this.objectId !== undefined ? String(this.objectId) : ''
 			const candidates = [self.name, self.title, obj.name, obj.title, obj.displayName]

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -725,7 +725,9 @@ export default {
 			if (this.widget && this.widget.type === 'files' && !(this.cnRegistry && this.cnRegistry.files) && this.register && this.schema) {
 				return CnObjectFilesWidget
 			}
-			return resolveRegistryRenderer(this.widget, this.cnRegistry)
+			// Inside a dashboard's tabs the dashboard's resolution holds.
+			const onDashboard = this.surface === 'app-dashboard' || this.surface === 'user-dashboard'
+			return resolveRegistryRenderer(this.widget, this.cnRegistry, { typeAsWritten: onDashboard })
 		},
 
 		/**

package/src/components/CnEmailPicker/CnEmailPicker.vue

@@ -171,6 +171,7 @@ import { NcButton, NcDialog, NcEmptyContent, NcLoadingIcon, NcNoteCard, NcTextFi
 import EmailOutline from 'vue-material-design-icons/EmailOutline.vue'
 import FolderOutline from 'vue-material-design-icons/FolderOutline.vue'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 export default {
 	name: 'CnEmailPicker',
@@ -404,7 +405,7 @@ export default {
 			if (Number.isNaN(d.getTime())) {
 				return String(raw)
 			}
-			return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+			return d.toLocaleDateString(userLocale(), { year: 'numeric', month: 'short', day: 'numeric' })
 		},
 	},
 }

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -145,6 +145,7 @@ import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { formatBoardDate } from '../../utils/boardDate.js'
 import { parseDateValue } from '../../utils/dateVariant.js'
+import { formatMoney, unwrapAppConfig } from '../../utils/formatMetric.js'
 import { readPath } from '../../utils/readPath.js'
 import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveFilterTokens.js'
 
@@ -246,6 +247,8 @@ export default {
 		cnTranslate: { default: () => (key) => key },
 		cnObjectContext: { default: null },
 		cnWorkspaceContext: { default: null },
+		/** The page's app config; its `currency` is the reporting currency a money value falls back to. */
+		cnAppConfig: { default: null },
 		/** Pre-bound action dispatcher of CnPageRenderer, for `action` / `headerAction`. */
 		cnDispatchAction: { default: null },
 	},
@@ -260,7 +263,7 @@ export default {
 		 *   A part may be `{ text }`, a constant; a `line` or `text` entry without `path` or `parts` shows its `text`.
 		 *   `resolve: { register, schema, labelField? }` on an entry or a part turns a value that is a reference (an id, or a list of ids) into the label of the referenced object (`labelField`, else `title`, then `name`): the case type or status of a task shows its name, not its uuid. The ids are fetched once per register and schema through the object store and shared by every facts widget on the page; the entry stays empty until its label is known, and when no label can be read. A resolved value works as a pill too: `map` is applied to the resolved label, and `variantMap` / `colorMap` look the tone up by the value of `resolve.toneField` on the referenced object when that is set (a status named by its `name`, coloured by its `state`), then by the resolved label, then by the stored value.
 		 * - `action` — an action drawn as a button under the facts; `headerAction` — one drawn in the card header (reported through the `header` event).
-		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year) or `list` (an array joined by ", ", each item read at `itemPath`).
+		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `list` (an array joined by ", ", each item read at `itemPath`) or `currency` (a money amount in the reader's language, "€ 1.234,50": the code in `currency`, else the record's `currencyField`, else the app's reporting currency, else EUR; `decimals` defaults to 2).
 		 *   `map` turns a raw value into a label (translated). `parts` (on a `line`) lists paths, or `{ path, label?, format? }`, joined by `separator` (default " · "); empty parts are dropped.
 		 * - `source` — `{ register, schema, id }` or `{ url }`; omitted = the current object.
 		 * - `link` — `{ label, route? | href? }` at the foot.
@@ -900,7 +903,7 @@ export default {
 		 */
 		valueOf(record, field) {
 			const raw = readPath(record, field.path)
-			return this.format(raw, field)
+			return this.format(raw, field, record)
 		},
 
 		/**
@@ -919,7 +922,7 @@ export default {
 					if (!spec.path && typeof spec.text === 'string') {
 						return this.tr(spec.text)
 					}
-					const value = this.format(readPath(record, spec.path), spec)
+					const value = this.format(readPath(record, spec.path), spec, record)
 					if (value === '') {
 						return ''
 					}
@@ -933,10 +936,12 @@ export default {
 		 * Format a raw value.
 		 *
 		 * @param {unknown} raw The value.
-		 * @param {object} spec `{ format?, map?, itemPath? }`.
+		 * @param {object} spec `{ format?, map?, itemPath?, currency?, currencyField?, decimals? }`.
+		 * @param {object|null} [record] The object shown, which `currencyField` reads.
 		 * @return {string} The text, '' when empty.
+		 * @spec openspec/changes/facts-currency-format/specs/facts-widget/spec.md#requirement-a-facts-entry-can-show-a-money-amount
 		 */
-		format(raw, spec) {
+		format(raw, spec, record = null) {
 			if (raw === null || raw === undefined || raw === '') {
 				return ''
 			}
@@ -961,6 +966,14 @@ export default {
 					? formatBoardDate(date, new Date(date.getFullYear() + 1, 0, 1))
 					: formatBoardDate(date)
 			}
+			if (format === 'currency') {
+				const money = formatMoney(raw, { currency: spec.currency, currencyField: spec.currencyField, decimals: spec.decimals }, record, unwrapAppConfig(this.cnAppConfig))
+				if (money !== '') {
+					return money
+				}
+				// Not a number: shown as written, never as "[object Object]".
+				return typeof raw === 'object' ? '' : String(raw)
+			}
 			if (typeof raw === 'object') {
 				const label = raw.title || raw.name || raw.label || raw.displayName
 				return typeof label === 'string' ? label : ''

package/src/components/CnFederationStatus/CnFederationStatus.vue

@@ -81,6 +81,8 @@
 </template>
 
 <script>
+import { userLocale } from '../../utils/userLocale.js'
+
 // The canonical KPI scale (`--cn-kpi-*`) lives in one stylesheet. Imported
 // here as well as from css/index.css so the tokens resolve even when the
 // consuming app pulls in components individually.
@@ -242,7 +244,7 @@ export default {
 				if (Number.isNaN(d.getTime())) {
 					return iso
 				}
-				return d.toLocaleString()
+				return d.toLocaleString(userLocale())
 			} catch {
 				return iso
 			}

package/src/components/CnFileManager/CnFileManager.vue

@@ -80,6 +80,7 @@
 </template>
 
 <script>
+import { userLocale } from '../../utils/userLocale.js'
 /**
  * CnFileManager — File list widget with drag-drop upload, per-file
  * actions, and a click-emit for preview / detail.
@@ -223,7 +224,7 @@ export default {
 				if (Number.isNaN(d.getTime())) {
 					return iso
 				}
-				return d.toLocaleString()
+				return d.toLocaleString(userLocale())
 			} catch {
 				return iso
 			}

package/src/components/CnFilePreview/CnFilePreview.vue

@@ -72,6 +72,7 @@ import { NcButton, NcDialog, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
 import { fileContentUrl, previewKindOf } from '../../composables/useFileOpener.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
 import { parseDelimited } from '../../utils/parseDelimited.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 /**
  * CnFilePreview — an in-page preview of a data file the Nextcloud Viewer does
@@ -203,7 +204,7 @@ export default {
 			if (estimate > shown) {
 				return t('nextcloud-vue', 'Showing the first {shown} of about {total} rows', {
 					shown,
-					total: estimate.toLocaleString(),
+					total: estimate.toLocaleString(userLocale()),
 				})
 			}
 			return t('nextcloud-vue', 'Showing the first {shown} rows', { shown })

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -110,7 +110,7 @@
 					<template #icon>
 						<CnIcon :name="action.icon || 'Plus'" :size="20" />
 					</template>
-					{{ action.label }}
+					{{ hostLabel(action) }}
 				</NcActionButton>
 			</NcActions>
 			<!-- A plain upload as its own button, when the host names it
@@ -193,7 +193,7 @@
 				<template #icon>
 					<CnIcon :name="action.icon || 'CheckboxMultipleMarkedOutline'" :size="20" />
 				</template>
-				{{ action.label }}
+				{{ hostLabel(action) }}
 			</NcButton>
 			<NcButton variant="tertiary"
 				data-testid="cn-files-browser-bulk-clear"
@@ -366,7 +366,7 @@
 										<template #icon>
 											<CnIcon :name="action.icon || 'FileDocumentEditOutline'" :size="20" />
 										</template>
-										{{ action.label }}
+										{{ hostLabel(action) }}
 									</NcActionButton>
 								</template>
 								<NcActionSeparator v-if="actionsFor(node).length > 0 || (!isFolder(node) && hostActionsFor(node).length > 0)" />
@@ -583,8 +583,6 @@
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
-import { FileType, formatFileSize, getFileActions, getNewFileMenuEntries, sortNodes, View } from '@nextcloud/files'
-import { getClient, getDefaultPropfind, getRemoteURL, getRootPath, resultToNode } from '@nextcloud/files/dav'
 /**
  * CnFilesBrowser — a folder of Nextcloud files, on any page, built from the
  * Files app's own primitives rather than a copy of its screen.
@@ -623,6 +621,9 @@ import { getClient, getDefaultPropfind, getRemoteURL, getRootPath, resultToNode
  * copy read `window._nc_fileactions`, which the server's plugins never write,
  * and saw nothing while the page held thirty actions.
  */
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { FileType, formatFileSize, getFileActions, getNewFileMenuEntries, sortNodes, View } from '@nextcloud/files'
+import { getClient, getDefaultPropfind, getRemoteURL, getRootPath, resultToNode } from '@nextcloud/files/dav'
 import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcActionSeparator, NcBreadcrumb, NcBreadcrumbs, NcButton, NcDateTime, NcDialog, NcIconSvgWrapper, NcLoadingIcon, NcProgressBar, NcTextField } from '@nextcloud/vue'
@@ -660,6 +661,12 @@ let uploadSeq = 0
 /** A folder glyph, the icon the Files app's View constructor requires. */
 const VIEW_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>'
 
+// Event-bus channels that mean the open folder may have changed: the page's
+// Refresh signal, and the node events the Files app's actions and uploader emit.
+const FOLDER_CHANGED_CHANNELS = ['cn:page:refresh', 'files:node:created', 'files:node:deleted', 'files:node:updated', 'files:node:moved']
+
+const FOLDER_CHANGED_DEBOUNCE_MS = 300
+
 export default {
 	name: 'CnFilesBrowser',
 
@@ -696,6 +703,10 @@ export default {
 		// The page's pre-bound action runner (CnPageRenderer provides it);
 		// absent outside a page tree, in which case the bare dispatcher runs.
 		cnDispatchAction: { default: null },
+		// The host app's translate function (CnAppRoot provides it). A row
+		// action or column the manifest declares is authored in English as
+		// the catalogue key, and read through this in the user's language.
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	props: {
@@ -1356,6 +1367,19 @@ export default {
 	mounted() {
 		this.loadColumnChoice()
 		this.refresh()
+		// Another surface on the page changed the folder: the page's Refresh,
+		// a dialog that filed a document, or a Files action whose work ends
+		// after its own call returned (the delete confirmation, an upload).
+		for (const channel of FOLDER_CHANGED_CHANNELS) {
+			subscribe(channel, this.onFolderChanged)
+		}
+	},
+
+	beforeUnmount() {
+		for (const channel of FOLDER_CHANGED_CHANNELS) {
+			unsubscribe(channel, this.onFolderChanged)
+		}
+		clearTimeout(this._folderChangedTimer)
 	},
 
 	methods: {
@@ -1643,6 +1667,30 @@ export default {
 		 * @param {object} node The node.
 		 * @return {string} The label.
 		 */
+		/**
+		 * A host action's label in the user's language.
+		 *
+		 * @spec openspec/changes/files-browser-hears-the-page/specs/files-browser/spec.md#requirement-a-declared-row-action-reads-in-the-users-language
+		 * @param {object} action The manifest-declared action.
+		 * @return {string} The label.
+		 */
+		hostLabel(action) {
+			return this.cnTranslate(String(action?.label ?? ''))
+		},
+
+		/**
+		 * Re-read the folder once after a burst of change signals. One upload
+		 * of ten files answers ten `files:node:created`, and one PROPFIND
+		 * covers them all.
+		 *
+		 * @spec openspec/changes/files-browser-hears-the-page/specs/files-browser/spec.md#requirement-the-files-browser-re-reads-when-the-page-says-files-changed
+		 * @return {void}
+		 */
+		onFolderChanged() {
+			clearTimeout(this._folderChangedTimer)
+			this._folderChangedTimer = setTimeout(() => this.refresh(), FOLDER_CHANGED_DEBOUNCE_MS)
+		},
+
 		labelOf(action, node) {
 			try {
 				return action.displayName(this.contextFor(node))
@@ -2034,7 +2082,7 @@ export default {
 		 */
 		columnLabel(column) {
 			if (column && typeof column.label === 'string' && column.label !== '') {
-				return column.label
+				return this.cnTranslate(column.label)
 			}
 			return this.builtInColumnLabels[column && column.key] || (column && column.key) || ''
 		},

package/src/components/CnFollowToggle/CnFollowToggle.vue

@@ -108,6 +108,7 @@ import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
 import { patchStoredSelf } from '../../utils/patchStoredSelf.js'
 import { listWatchers, setWatcher, setWatching } from '../../utils/recordInteractions.js'
 import { searchNextcloudUsers } from '../../utils/userAutocomplete.js'
+import { userLocale } from '../../utils/userLocale.js'
 
 /**
  * CnFollowToggle — the one Follow control of a record: a Follow toggle bound to
@@ -298,7 +299,7 @@ export default {
 			const d = new Date(created)
 			return Number.isNaN(d.getTime())
 				? ''
-				: t('nextcloud-vue', 'Since {date}', { date: d.toLocaleDateString() })
+				: t('nextcloud-vue', 'Since {date}', { date: d.toLocaleDateString(userLocale()) })
 		},
 
 		removeFollowerLabel(watcher) {