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

package/src/css/index-page.css

@@ -104,6 +104,19 @@
 	margin-top: 0;
 }
 
+/* The board view's footer: how many rows it holds of how many match, and
+   "Load more" while the list is not complete. */
+.cn-index-page__board-load {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px 16px;
+	padding: 12px 16px;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+
 /* Table view owns both scroll axes. With the page column scrolling instead, the
    table's horizontal scrollbar sat at the bottom of the (taller-than-viewport)
    table, so it only appeared after scrolling down, and the pagination was
@@ -369,3 +382,39 @@
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
+
+/*
+ * screens-board-reference-columns: the board view's controls after the
+ * search (board DqWerkbord): "Case type:" and "Columns:" as a 600 label and a
+ * 36px select, then the hint in the secondary text colour.
+ */
+.cn-index-page__board-control {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+
+.cn-index-page__board-select {
+	height: 36px;
+	min-height: 36px;
+	margin: 0;
+	padding: 0 10px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: 8px;
+	background-color: var(--color-main-background);
+	color: var(--color-main-text);
+	font: inherit;
+	font-weight: 400;
+}
+
+.cn-index-page__board-select--strong {
+	font-weight: 500;
+}
+
+.cn-index-page__board-hint {
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}

package/src/css/look-board.css

@@ -422,6 +422,7 @@
    `.cn-look-board.cn-admin-settings-shell` is a shell told `look: "board"`
    itself, on an admin page no CnAppRoot wraps. */
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .cn-admin-settings-shell__header,
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > :not(.settings-section):not(.cn-credentials),
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):not(.cn-credentials),
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):not(.cn-credentials) {
 	grid-column: 1 / -1;
@@ -429,6 +430,7 @@
 
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *),
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *),
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *),
 .cn-look-board .cn-settings-page__sections:not(.cn-look-nextcloud *) {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
@@ -440,14 +442,17 @@
    Settings.vue) takes no box of its own: its sections are grid items and
    cards, as if the shell held them directly. Only an element whose own
    children are sections; anything else keeps spanning the grid. */
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section),
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section),
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) {
 	display: contents;
 }
 
-/* The card: a section of the shell (also one inside a wrapping element), or a CnSettingsCard of the page. */
+/* The card: a section of the shell or of one of its tab panels (also one inside a wrapping element), or a CnSettingsCard of the page. */
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > .settings-section,
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
 .cn-look-board .cn-settings-page__sections:not(.cn-look-nextcloud *) > .cn-settings-card {
@@ -483,7 +488,7 @@
 	justify-content: flex-start;
 	text-align: start;
 	margin: 0;
-	font-size: 19px;
+	font-size: 17px;
 	font-weight: 700;
 	line-height: 1.3;
 }
@@ -491,18 +496,83 @@
 .cn-look-board .settings-section:not(.cn-look-nextcloud *) .settings-section__desc {
 	margin: 4px 0 0;
 	font-size: 14px;
-	line-height: 1.45;
+	line-height: 1.5;
 	color: var(--color-text-maxcontrast);
 }
 
-/* Section actions sit at the end of the title row. */
+/* Section actions sit at the end of the title row. The row is a grid, so a
+   long title wraps beside the buttons instead of running under them, and in a
+   narrow card the buttons drop under the title and description. */
+.cn-look-board .settings-section:not(.cn-look-nextcloud *):has(> .cn-settings-section__actions) {
+	/* `!important`: the card rules above set `display: flex` at higher specificity for a section in a wrapping element. */
+	display: grid !important;
+	grid-template-columns: minmax(0, 1fr) auto;
+	align-items: start;
+	column-gap: 16px;
+	container-type: inline-size;
+}
+
+.cn-look-board .settings-section:not(.cn-look-nextcloud *):has(> .cn-settings-section__actions) > * {
+	grid-column: 1 / -1;
+}
+
+.cn-look-board .settings-section:not(.cn-look-nextcloud *):has(> .cn-settings-section__actions) > .settings-section__name {
+	grid-row: 1;
+	grid-column: 1;
+}
+
 .cn-look-board .settings-section:not(.cn-look-nextcloud *) > .cn-settings-section__actions {
-	position: absolute;
-	inset-block-start: 22px;
-	inset-inline-end: 24px;
+	grid-row: 1;
+	grid-column: 2;
+	position: static;
+	flex-wrap: wrap;
+	justify-self: end;
 	float: none;
 }
 
+@container (max-width: 520px) {
+	.cn-look-board .settings-section:not(.cn-look-nextcloud *) > .cn-settings-section__actions {
+		grid-row: auto;
+		grid-column: 1 / -1;
+		justify-self: start;
+		justify-content: flex-start;
+	}
+}
+
+/* An admin settings card as the board draws it (PtBeheerinstellingen,
+   KqBeheerAlgemeen, HuInstellingen): 20px 22px padding, and the title and
+   description one group, 4px apart, spaced from the rest of the card by the
+   card's 14px gap. The description is a sibling of the title in that column,
+   so it pulls itself back up to 4px under the title. The gap spaces the
+   content, so a note card adds no margin of its own (NcNoteCard draws 16px
+   above and below). A CnSettingsPage card keeps 22px 24px. */
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > .settings-section,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section {
+	padding: 20px 22px;
+}
+
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > .settings-section > .settings-section__desc,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section > .settings-section__desc,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section > .settings-section__desc,
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section > .settings-section__desc,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section > .settings-section__desc,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section > .settings-section__desc {
+	margin-top: -10px;
+}
+
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > .settings-section > .notecard,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section > .notecard,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section > .notecard,
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section > .notecard,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section > .notecard,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section > .notecard {
+	margin-block: 0;
+}
+
 .cn-look-board .settings-section.cn-settings-section--wide:not(.cn-look-nextcloud *),
 .cn-look-board .cn-settings-card:has(.cn-settings-section--wide):not(.cn-look-nextcloud *) {
 	grid-column: 1 / -1;

package/src/dialogs/CnNoteHistoryDialog.vue

@@ -78,6 +78,7 @@ import HistoryIcon from 'vue-material-design-icons/History.vue'
 import CnDialog from '../components/CnDialog/CnDialog.vue'
 import { dialogBoardMixin } from '../mixins/dialogBoard.js'
 import { buildHeaders, prefixUrl } from '../utils/index.js'
+import { userLocale } from '../utils/userLocale.js'
 
 export default {
 	name: 'CnNoteHistoryDialog',
@@ -193,7 +194,7 @@ export default {
 				return ''
 			}
 			try {
-				return new Date(dateStr).toLocaleString(undefined, {
+				return new Date(dateStr).toLocaleString(userLocale(), {
 					year: 'numeric',
 					month: 'short',
 					day: 'numeric',

package/src/integrations/builtin/activity/CnActivityCard.vue

@@ -112,6 +112,7 @@ import Timeline from 'vue-material-design-icons/Timeline.vue'
 import CnDetailCard from '../../../components/CnDetailCard/CnDetailCard.vue'
 import CnVisibilityChip from '../../../components/CnVisibilityChip/CnVisibilityChip.vue'
 import { buildHeaders, prefixUrl } from '../../../utils/index.js'
+import { userLocale } from '../../../utils/userLocale.js'
 
 const VALID_SURFACES = ['user-dashboard', 'app-dashboard', 'detail-page', 'single-entity']
 const COMPACT_LIMIT = 4
@@ -297,7 +298,7 @@ export default {
 				return t('nextcloud-vue', 'Yesterday')
 			}
 			try {
-				return date.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' })
+				return date.toLocaleDateString(userLocale(), { weekday: 'short', day: 'numeric', month: 'short' })
 			} catch {
 				return date.toISOString().split('T')[0]
 			}
@@ -309,7 +310,7 @@ export default {
 				return ''
 			}
 			try {
-				return ts.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+				return ts.toLocaleTimeString(userLocale(), { hour: '2-digit', minute: '2-digit' })
 			} catch {
 				return ts.toISOString().split('T')[1].slice(0, 5)
 			}

package/src/integrations/builtin/activity/CnActivityTab.vue

@@ -319,6 +319,7 @@ import Timeline from 'vue-material-design-icons/Timeline.vue'
 import CnVisibilityChip from '../../../components/CnVisibilityChip/CnVisibilityChip.vue'
 import { normalizeLook } from '../../../composables/useLook.js'
 import { buildHeaders, prefixUrl } from '../../../utils/index.js'
+import { userLocale } from '../../../utils/userLocale.js'
 import { ACTIVITY_FEED_KINDS, exportBody, feedPath, feedQuery, isReadRow, parseFeed } from './activityFeedWire.js'
 
 const DEFAULT_PAGE_SIZE = 25
@@ -643,7 +644,7 @@ export default {
 				return t('nextcloud-vue', 'Yesterday')
 			}
 			try {
-				return date.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' })
+				return date.toLocaleDateString(userLocale(), { weekday: 'short', day: 'numeric', month: 'short' })
 			} catch {
 				return date.toISOString().split('T')[0]
 			}
@@ -655,7 +656,7 @@ export default {
 				return ''
 			}
 			try {
-				return ts.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+				return ts.toLocaleTimeString(userLocale(), { hour: '2-digit', minute: '2-digit' })
 			} catch {
 				return ts.toISOString().split('T')[1].slice(0, 5)
 			}
@@ -703,7 +704,7 @@ export default {
 			let when = ''
 			if (ts !== null) {
 				try {
-					when = ts.toLocaleString(undefined, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
+					when = ts.toLocaleString(userLocale(), { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
 				} catch {
 					when = ts.toISOString().replace('T', ' ').slice(0, 16)
 				}

package/src/integrations/builtin/analytics/CnAnalyticsTab.vue

@@ -177,6 +177,7 @@ import CnAnalyticsReportCreate from '../../../components/CnAnalyticsReportCreate
 import CnAnalyticsReportPicker from '../../../components/CnAnalyticsReportPicker/CnAnalyticsReportPicker.vue'
 import CnStatusBadge from '../../../components/CnStatusBadge/CnStatusBadge.vue'
 import { buildHeaders, prefixUrl, safeHref } from '../../../utils/index.js'
+import { userLocale } from '../../../utils/userLocale.js'
 
 /**
  * CnAnalyticsTab — bespoke dataset list for the `analytics` integration.
@@ -394,7 +395,7 @@ export default {
 			const num = Number(raw)
 			if (Number.isFinite(num) && String(raw).trim() !== '') {
 				try {
-					return num.toLocaleString()
+					return num.toLocaleString(userLocale())
 				} catch {
 					return String(num)
 				}
@@ -436,7 +437,7 @@ export default {
 				if (Number.isNaN(d.getTime())) {
 					return String(value)
 				}
-				return d.toLocaleDateString(undefined, { dateStyle: 'medium' })
+				return d.toLocaleDateString(userLocale(), { dateStyle: 'medium' })
 			} catch {
 				return String(value)
 			}

package/src/integrations/builtin/calendar/CnCalendarCard.vue

@@ -107,6 +107,7 @@ import CalendarCheck from 'vue-material-design-icons/CalendarCheck.vue'
 import CalendarClock from 'vue-material-design-icons/CalendarClock.vue'
 import CnDetailCard from '../../../components/CnDetailCard/CnDetailCard.vue'
 import { buildHeaders, prefixUrl } from '../../../utils/index.js'
+import { userLocale } from '../../../utils/userLocale.js'
 
 /**
  * CnCalendarCard — surface-aware compact widget for the calendar
@@ -323,7 +324,7 @@ export default {
 				const opts = this.surface === 'single-entity'
 					? { dateStyle: 'medium' }
 					: { dateStyle: 'medium', timeStyle: 'short' }
-				return d.toLocaleString(undefined, opts)
+				return d.toLocaleString(userLocale(), opts)
 			} catch {
 				return String(value)
 			}

package/src/integrations/builtin/calendar/CnCalendarTab.vue

@@ -240,6 +240,7 @@ import CnCalendarEventCreate from '../../../components/CnCalendarEventCreate/CnC
 import CnCalendarEventPicker from '../../../components/CnCalendarEventPicker/CnCalendarEventPicker.vue'
 import CnStatusBadge from '../../../components/CnStatusBadge/CnStatusBadge.vue'
 import { buildHeaders, prefixUrl } from '../../../utils/index.js'
+import { userLocale } from '../../../utils/userLocale.js'
 
 const MAX_AVATARS = 3
 
@@ -524,7 +525,7 @@ export default {
 			if (!d) {
 				return '—'
 			}
-			return d.toLocaleDateString(undefined, { month: 'short' })
+			return d.toLocaleDateString(userLocale(), { month: 'short' })
 		},
 
 		dayOf(ev) {
@@ -541,16 +542,16 @@ export default {
 				return ev.dtstart ? String(ev.dtstart) : t('nextcloud-vue', 'Time not set')
 			}
 			const end = this.parseDate(ev.dtend)
-			const dateLabel = start.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' })
+			const dateLabel = start.toLocaleDateString(userLocale(), { weekday: 'short', day: 'numeric', month: 'short' })
 			const timeOpts = { hour: '2-digit', minute: '2-digit' }
-			const startTime = start.toLocaleTimeString(undefined, timeOpts)
+			const startTime = start.toLocaleTimeString(userLocale(), timeOpts)
 			if (end) {
 				const sameDay = start.toDateString() === end.toDateString()
-				const endTime = end.toLocaleTimeString(undefined, timeOpts)
+				const endTime = end.toLocaleTimeString(userLocale(), timeOpts)
 				if (sameDay) {
 					return `${dateLabel} · ${startTime} – ${endTime}`
 				}
-				const endDateLabel = end.toLocaleDateString(undefined, { day: 'numeric', month: 'short' })
+				const endDateLabel = end.toLocaleDateString(userLocale(), { day: 'numeric', month: 'short' })
 				return `${dateLabel} ${startTime} – ${endDateLabel} ${endTime}`
 			}
 			return `${dateLabel} · ${startTime}`

package/src/integrations/builtin/contactmoment/CnContactmomentCard.vue

@@ -61,6 +61,7 @@ import { NcLoadingIcon } from '@nextcloud/vue'
 import PhoneOutline from 'vue-material-design-icons/PhoneOutline.vue'
 import CnDetailCard from '../../../components/CnDetailCard/CnDetailCard.vue'
 import { prefixUrl } from '../../../utils/index.js'
+import { userLocale } from '../../../utils/userLocale.js'
 
 export default {
 	name: 'CnContactmomentCard',
@@ -182,7 +183,7 @@ export default {
 		 */
 		formatWhen(value) {
 			const d = new Date(value)
-			return isNaN(d.getTime()) ? value : d.toLocaleString()
+			return isNaN(d.getTime()) ? value : d.toLocaleString(userLocale())
 		},
 	},
 }

package/src/integrations/builtin/cospend/CnCospendTab.vue

@@ -175,6 +175,7 @@ import CnCospendCreate from '../../../components/CnCospendCreate/CnCospendCreate
 import CnCospendPicker from '../../../components/CnCospendPicker/CnCospendPicker.vue'
 import CnStatusBadge from '../../../components/CnStatusBadge/CnStatusBadge.vue'
 import { buildHeaders, prefixUrl, safeHref } from '../../../utils/index.js'
+import { userLocale } from '../../../utils/userLocale.js'
 
 /**
  * CnCospendTab — bespoke sidebar tab for the `cospend` integration.
@@ -495,7 +496,7 @@ export default {
 			if (Number.isNaN(date.getTime())) {
 				return ''
 			}
-			return date.toLocaleDateString(undefined, { dateStyle: 'medium' })
+			return date.toLocaleDateString(userLocale(), { dateStyle: 'medium' })
 		},
 
 		/**

package/src/integrations/builtin/deck/CnDeckTab.vue

@@ -168,6 +168,7 @@ import CnDeckCardCreate from '../../../components/CnDeckCardCreate/CnDeckCardCre
 import CnDeckCardPicker from '../../../components/CnDeckCardPicker/CnDeckCardPicker.vue'
 import CnStatusBadge from '../../../components/CnStatusBadge/CnStatusBadge.vue'
 import { buildHeaders, prefixUrl, safeHref } from '../../../utils/index.js'
+import { userLocale } from '../../../utils/userLocale.js'
 
 /** Maximum assignee avatars shown before collapsing the rest into a +N overflow badge. */
 const MAX_VISIBLE_ASSIGNEES = 3
@@ -427,7 +428,7 @@ export default {
 			if (Number.isNaN(date.getTime())) {
 				return ''
 			}
-			return date.toLocaleDateString(undefined, { dateStyle: 'medium' })
+			return date.toLocaleDateString(userLocale(), { dateStyle: 'medium' })
 		},
 
 		/**

package/src/integrations/builtin/email/CnEmailCard.vue

@@ -68,6 +68,7 @@ import { markRaw } from 'vue'
 import Email from 'vue-material-design-icons/Email.vue'
 import CnDetailCard from '../../../components/CnDetailCard/CnDetailCard.vue'
 import { buildHeaders, prefixUrl } from '../../../utils/index.js'
+import { userLocale } from '../../../utils/userLocale.js'
 
 /**
  * CnEmailCard — compact widget for the `email` integration leaf.
@@ -279,7 +280,7 @@ export default {
 			if (Number.isNaN(d.getTime()) === true) {
 				return String(raw)
 			}
-			return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+			return d.toLocaleDateString(userLocale(), { year: 'numeric', month: 'short', day: 'numeric' })
 		},
 
 		// Thread deep-link into NC Mail; undefined when the row lacks ids.

package/src/integrations/builtin/field-inspection/CnFieldInspectionCard.vue

@@ -164,6 +164,7 @@ import { NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import ClipboardCheckOutline from 'vue-material-design-icons/ClipboardCheckOutline.vue'
 import CnDetailCard from '../../../components/CnDetailCard/CnDetailCard.vue'
 import CnOfflineQueue from '../../../components/CnOfflineQueue/index.js'
+import { userLocale } from '../../../utils/userLocale.js'
 import { buildChecklistSubmission } from '../../offline/checklistSubmission.js'
 import { checklistProgress, classifyGps, normaliseChecklistTemplate, syncIndicator, validateChecklistAnswers } from '../../offline/fieldCollectionHelpers.js'
 import {
@@ -379,7 +380,7 @@ export default {
 			if (!iso) {
 				return ''
 			}
-			return new Date(iso).toLocaleString()
+			return new Date(iso).toLocaleString(userLocale())
 		},
 
 		errorFor(questionId) {

package/src/integrations/builtin/field-inspection/CnFieldInspectionTab.vue

@@ -86,6 +86,7 @@ import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import ClipboardCheckOutline from 'vue-material-design-icons/ClipboardCheckOutline.vue'
 import Sync from 'vue-material-design-icons/Sync.vue'
 import CnOfflineQueue from '../../../components/CnOfflineQueue/index.js'
+import { userLocale } from '../../../utils/userLocale.js'
 import { syncIndicator } from '../../offline/fieldCollectionHelpers.js'
 import {
 	countPending,
@@ -186,7 +187,7 @@ export default {
 				return ''
 			}
 			const moment = new Date(syncedAt)
-			return Number.isNaN(moment.getTime()) ? '' : moment.toLocaleString()
+			return Number.isNaN(moment.getTime()) ? '' : moment.toLocaleString(userLocale())
 		},
 
 		/**

package/src/integrations/builtin/photos/CnPhotosTab.vue

@@ -154,6 +154,7 @@ import Plus from 'vue-material-design-icons/Plus.vue'
 import CnPhotoAlbumCreate from '../../../components/CnPhotoAlbumCreate/CnPhotoAlbumCreate.vue'
 import CnPhotoAlbumPicker from '../../../components/CnPhotoAlbumPicker/CnPhotoAlbumPicker.vue'
 import { buildHeaders, prefixUrl, safeHref } from '../../../utils/index.js'
+import { userLocale } from '../../../utils/userLocale.js'
 
 /**
  * CnPhotosTab — bespoke album grid for the `photos` integration.
@@ -317,7 +318,7 @@ export default {
 				if (Number.isNaN(d.getTime())) {
 					return String(value)
 				}
-				return d.toLocaleDateString(undefined, { dateStyle: 'medium' })
+				return d.toLocaleDateString(userLocale(), { dateStyle: 'medium' })
 			} catch {
 				return String(value)
 			}

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.96.0",
+	"version": "2.100.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -1116,7 +1116,12 @@
 							"additionalProperties": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] }
 						},
 						"due": { "type": "string", "description": "The date field of the footer's due text, marked by `dueRule`." },
-						"owner": { "type": "string", "description": "The field of the owner shown as an avatar (initials) at the footer's end." }
+						"owner": { "type": "string", "description": "The field of the owner shown as an avatar (initials) at the footer's end." },
+						"formatters": {
+							"type": "object",
+							"description": "screens-board-reference-columns (2.97.0): a card field (one of the role fields above) to the id of a formatter in the app's `cnFormatters` registry, the one table columns name in `formatter`. The card shows the formatted text, so a reference reads as its name (`{ \"caseType\": \"caseTypeName\" }`).",
+							"additionalProperties": { "type": "string", "minLength": 1 }
+						}
 					}
 				},
 				"colorField": {
@@ -1145,6 +1150,96 @@
 				"dueRule": {
 					"$ref": "#/$defs/dueRule",
 					"description": "Marks late cards. A card whose date is before today gets an error edge and the label 'Overdue'; one due within `soonDays` gets 'Due soon'. Omitted, no card is marked."
+				},
+				"columnFields": {
+					"type": "array",
+					"minItems": 1,
+					"description": "screens-board-reference-columns (2.97.0): the fields the columns can come from, offered in a \"Columns:\" switch after the search when there are two or more (\"status | type | assignee\"). The entry on `statusField` is the default. An entry with a `source` takes its columns from the rows the field REFERENCES (a case's status pointing at statusType rows), fetched, not from the values on the cards; `kind: \"values\"` (a user id, which references no schema) takes the values present plus a column for no value. Without a `source` or `kind` the field's enum or lifecycle states are read as before. A drop writes the reference: through `moveHandler` when named, else a PATCH of the field on the row.",
+					"items": {
+						"type": "object",
+						"additionalProperties": false,
+						"required": ["field"],
+						"properties": {
+							"field": { "type": "string", "minLength": 1, "description": "The row field the columns come from." },
+							"label": { "type": "string", "description": "Its name in the column switch (an i18n key). Defaults to the field." },
+							"kind": { "type": "string", "enum": ["values"], "description": "`values`: the field references no schema (a Nextcloud user id); the columns are the values present on the rows, by `valueLabels` or the value itself, then one column for no value (`emptyLabel`)." },
+							"valueLabels": { "type": "object", "additionalProperties": { "type": "string" }, "description": "`kind: values`: raw value to the column label." },
+							"emptyLabel": { "type": "string", "description": "`kind: values`: the label of the column for no value (an i18n key). Defaults to \"Nobody\"." },
+							"source": {
+								"type": "object",
+								"additionalProperties": false,
+								"description": "The referenced rows that are the columns: one list request to `register`/`schema` (defaults: the page's register and the property's `$ref`).",
+								"properties": {
+									"register": { "type": "string", "minLength": 1 },
+									"schema": { "type": "string", "minLength": 1 },
+									"labelField": { "type": "string", "description": "The referenced row's field that names a column. Defaults to `name`, then `title`." },
+									"orderField": { "type": "string", "description": "The referenced row's numeric field the columns are ordered by." },
+									"colorField": { "type": "string", "description": "The referenced row's field that holds the column's dot colour (a badge variant or a CSS colour)." },
+									"filter": { "type": "object", "description": "Equality filters on the referenced rows, e.g. `{ \"isFinal\": false }` to leave out end states.", "additionalProperties": { "type": ["string", "number", "boolean"] } },
+									"capacityField": { "type": "string", "minLength": 1, "description": "board-column-capacity (2.100.0): the referenced row's numeric field that holds the column's limit. The header reads \"count / capacity\" and turns full at the limit, and a move into a full row is refused before it is written (the server still guards). A column merged from several rows shows no limit, but each row's own limit still refuses a move into it. A row without a number above 0 has no limit." },
+									"mergeBy": { "type": "string", "description": "Merge referenced rows with the same value of this field into one column (statuses of every case type by `name`). A drop then writes the row of the card's own parent (`narrowBy`), and is refused when that parent has none." },
+									"narrowBy": {
+										"type": "object",
+										"additionalProperties": false,
+										"required": ["field", "rowField"],
+										"description": "The parent link: the referenced row's `field` equals the card's `rowField` (statusType.caseType = case.caseType). While the page filters on `rowField` with one value, the columns are that parent's rows only.",
+										"properties": {
+											"field": { "type": "string", "minLength": 1 },
+											"rowField": { "type": "string", "minLength": 1 }
+										}
+									}
+								}
+							},
+							"readOnly": { "type": "boolean", "default": false, "description": "No drag and no Move to while the columns come from this field." },
+							"moveHandler": { "type": "string", "minLength": 1, "description": "A handler in the app's registry that makes the move: it gets `{ card, toKey, field, value, target }` (value: the referenced id to write; target: its row) and returns a promise; a rejection shows its message as the refusal. Absent, the field is written with a PATCH." },
+							"moveTargetsHandler": { "type": "string", "minLength": 1, "description": "A handler in the app's registry that answers where one card may go: it gets `{ card, field }` and returns the values (referenced ids) it can reach. Columns out of reach fade during a drag, read \"not allowed\" in the card menu, and refuse a drop." }
+						}
+					}
+				},
+				"moveHandler": {
+					"type": "string",
+					"minLength": 1,
+					"description": "screens-board-reference-columns (2.97.0): a handler in the app's registry that moves a card on `statusField` (the app's transition), with the `columnFields[].moveHandler` call shape. Lets a manifest-only page run the host's transition, which the `runTransition` prop could not."
+				},
+				"moveTargetsHandler": {
+					"type": "string",
+					"minLength": 1,
+					"description": "screens-board-reference-columns (2.97.0): where a card on `statusField` may go, with the `columnFields[].moveTargetsHandler` call shape."
+				},
+				"narrow": {
+					"type": "object",
+					"additionalProperties": false,
+					"required": ["field"],
+					"description": "screens-board-reference-columns (2.97.0): a select after the search (\"Case type: All case types | Woo-verzoek | ...\") that sets the page filter on `field`. With a reference column's `narrowBy.rowField` on the same field, the columns narrow to that parent's rows.",
+					"properties": {
+						"field": { "type": "string", "minLength": 1, "description": "The row field the select filters on." },
+						"label": { "type": "string", "description": "The select's label (an i18n key), shown with a colon. Defaults to the property's title." },
+						"allLabel": { "type": "string", "description": "The option for no narrowing (an i18n key). Defaults to \"All\"." },
+						"source": {
+							"type": "object",
+							"additionalProperties": false,
+							"description": "Where the options come from (defaults: the page's register and the property's `$ref`).",
+							"properties": {
+								"register": { "type": "string", "minLength": 1 },
+								"schema": { "type": "string", "minLength": 1 },
+								"labelField": { "type": "string", "description": "The option row's label field. Defaults to `title`." },
+								"filter": { "type": "object", "additionalProperties": { "type": ["string", "number", "boolean"] } }
+							}
+						}
+					}
+				},
+				"columnSwitchLabel": {
+					"type": "string",
+					"description": "screens-board-reference-columns (2.97.0): the column switch's label (an i18n key), shown with a colon. Defaults to \"Columns\"."
+				},
+				"hint": {
+					"type": "string",
+					"description": "screens-board-reference-columns (2.97.0): one sentence after the board's controls, in the secondary colour (an i18n key), e.g. how a move works."
+				},
+				"wrap": {
+					"type": "boolean",
+					"default": false,
+					"description": "screens-board-reference-columns (2.97.0): wrap the columns onto more rows, as many to a row as fit at 240px, instead of one row that scrolls sideways. For a board with more stages than fit."
 				}
 			}
 		},
@@ -3533,7 +3628,7 @@
 						},
 						"titleField": {
 							"type": "string",
-							"description": "type='wiki': property on the article object holding the page title. Defaults to 'title'. Maps to CnWikiPage `titleField` prop."
+							"description": "type='wiki': property on the article object holding the page title. Defaults to 'title'. Maps to CnWikiPage `titleField` prop. type='detail' (detail-title-field): the record field (a dotted path, for example `number`) the header names the record by, as an invoice page names the invoice number instead of the schema title; an empty value falls back to the display name, and the breadcrumb's current crumb and the type eyebrow follow. Maps to CnDetailPage `titleField`."
 						},
 						"idParam": {
 							"type": "string",
@@ -4177,8 +4272,19 @@
 							"description": "type='index': show the page header (icon, title, description) inline. Default false: the title renders visually hidden and the sidebar names the page. Maps to CnIndexPage `showTitle`."
 						},
 						"countSubtitle": {
-							"type": "string",
-							"description": "type='index': an i18n key for the description line with `{total}` replaced by the collection's total, e.g. \"{total} open cases\" (zuiddrecht-pixel-gaps). Shown in place of `description` once a total is known. Maps to CnIndexPage `countSubtitle`."
+							"anyOf": [
+								{ "type": "string" },
+								{
+									"type": "object",
+									"additionalProperties": false,
+									"required": ["singular", "plural"],
+									"properties": {
+										"singular": { "type": "string", "minLength": 1, "description": "i18n key of the line for a total of one, e.g. \"{total} invoice\"." },
+										"plural": { "type": "string", "minLength": 1, "description": "i18n key of the line for any other total, e.g. \"{total} invoices\"." }
+									}
+								}
+							],
+							"description": "type='index': an i18n key for the description line with `{total}` replaced by the collection's total, e.g. \"{total} open cases\" (zuiddrecht-pixel-gaps). Shown in place of `description` once a total is known. `{ singular, plural }` picks the form by the total through the app's plural translation (`translatePlural`), so \"1 factuur\" and \"12 facturen\" each read right (index-count-plural). Maps to CnIndexPage `countSubtitle`."
 						},
 						"showTitleIcon": {
 							"type": "boolean",
@@ -4531,6 +4637,11 @@
 						}
 					}
 				},
+				{
+					"description": "screens-board-reference-columns (2.97.0): config.board on an index page, the block CnPageRenderer hands to CnIndexPage's `board` prop, is typed by boardView like pages[].board.",
+					"if": { "properties": { "type": { "const": "index" } }, "required": ["type"] },
+					"then": { "properties": { "config": { "properties": { "board": { "$ref": "#/$defs/boardView" } } } } }
+				},
 				{
 					"description": "index-calendar-view-mode: config.calendar on an index page is typed by calendarView.",
 					"if": { "properties": { "type": { "const": "index" } }, "required": ["type"] },