@conduction/nextcloud-vue 2.82.0 → 2.83.0

package/l10n/nl.json

@@ -355,7 +355,7 @@
     "Copy items": "Items kopiëren",
     "Copy of {name}": "Kopie van {name}",
     "Copy property": "Eigenschap kopiëren",
-    "Copy selected": "Geselecteerde kopiëren",
+    "Copy selected": "Selectie kopiëren",
     "Copy {key}": "Kopieer {key}",
     "Create": "Aanmaken",
     "Create (C)": "Aanmaken (C)",
@@ -386,7 +386,7 @@
     "Delete note": "Notitie verwijderen",
     "Delete objects": "Objecten verwijderen",
     "Delete property": "Eigenschap verwijderen",
-    "Delete selected": "Geselecteerde verwijderen",
+    "Delete selected": "Selectie verwijderen",
     "Delete {key}": "Verwijder {key}",
     "Deprecated": "Verouderd",
     "Description": "Beschrijving",
@@ -1148,7 +1148,7 @@
     "Could not load entries.": "Kon registraties niet laden.",
     "Could not create client.": "Kon klant niet aanmaken.",
     "{count} selected": "{count} geselecteerd",
-    "Clear selection": "Selectie wissen",
+    "Clear selection": "Selectie opheffen",
     "Overdue by 1 day": "1 dag over tijd",
     "Overdue by {days} days": "{days} dagen over tijd",
     "Overdue": "Over tijd",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.82.0",
+  "version": "2.83.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/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -56,6 +56,11 @@
 			</div>
 		</div>
 
+		<!-- `versionCardPosition: "end"`: the app's sections come first, and the
+		     version card and the credential broker follow them (board DcBeheer
+		     starts with the app's own card). The same slot, rendered once. -->
+		<slot v-if="versionCardAtEnd" />
+
 		<!-- Version information card (version, up-to-date check, re-import, support footer) -->
 		<CnVersionInfoCard
 			v-if="showVersionCard"
@@ -151,8 +156,8 @@
 			:appCredentials="appCredentials"
 			data-testid="cn-admin-organisation-credentials" />
 
-		<!-- @slot default The app's own settings sections, rendered below the version card. -->
-		<slot />
+		<!-- @slot default The app's own settings sections, rendered below the version card, or above it with `versionCardPosition: "end"`. -->
+		<slot v-if="!versionCardAtEnd" />
 
 		<!-- First-time setup wizard, opened from the admin page (ADR-042). -->
 		<CnSetupWizard
@@ -358,6 +363,20 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * Where the version card (and the organisation credential broker) sits:
+		 * `start`, above the app's sections (the default), or `end`, after them,
+		 * for a page whose board starts with the app's own card. The keyboard
+		 * order follows, because the slot moves in the markup.
+		 *
+		 * @spec openspec/changes/screens-admin-settings-version-card-end/specs/settings-board-look/spec.md#requirement-the-version-card-can-follow-the-apps-sections
+		 */
+		versionCardPosition: {
+			type: String,
+			default: 'start',
+			validator: (value) => ['start', 'end'].includes(value),
+		},
+
 		/** Version card heading. */
 		versionTitle: {
 			type: String,
@@ -482,6 +501,16 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the app's sections come before the version card.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/screens-admin-settings-version-card-end/specs/settings-board-look/spec.md#requirement-the-version-card-can-follow-the-apps-sections
+		 */
+		versionCardAtEnd() {
+			return this.versionCardPosition === 'end'
+		},
+
 		/**
 		 * The crumbs that have a label.
 		 *

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -4578,6 +4578,15 @@ export default {
 			// because the dispatcher only forwards `content` — honour it with a
 			// one-time deprecation warning so those cards render while authors
 			// migrate the key under `content`.
+			// Grid layout (`layout: "grid"`): stat tiles in columns.
+			const stats = content.stats !== undefined ? content.stats : props.stats
+			if (Array.isArray(stats)) {
+				out.stats = stats
+			}
+			const columns = content.columns !== undefined ? content.columns : props.columns
+			if (columns !== undefined) {
+				out.columns = Number(columns)
+			}
 			const contentEntries = content.entries !== undefined ? content.entries : props.entries
 			if (contentEntries !== undefined) {
 				out.entries = contentEntries

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -47,8 +47,19 @@
 								     actions when it names none): a header action, a built-in by
 								     name, or a link (an entry with `href`, the documentation). -->
 								<template v-for="entry in headerMenuEntries(button)" :key="entry.key">
+									<!-- A group heading and a separator (`{ heading }` and
+									     `separator` in items), as the board's "Ga naar" and
+									     "Selectie" groups. -->
+									<NcActionCaption
+										v-if="entry.kind === 'heading'"
+										class="cn-index-header-menu__heading"
+										:name="entry.label"
+										:data-testid="`cn-index-header-menu-${entry.key}`" />
+									<NcActionSeparator
+										v-else-if="entry.kind === 'separator'"
+										:data-testid="`cn-index-header-menu-${entry.key}`" />
 									<NcActionLink
-										v-if="entry.href"
+										v-else-if="entry.href"
 										:href="entry.href"
 										target="_blank"
 										rel="noopener noreferrer"
@@ -58,6 +69,17 @@
 										</template>
 										{{ entry.label }}
 									</NcActionLink>
+									<NcActionLink
+										v-else-if="entry.link"
+										:href="entry.link.href"
+										:closeAfterClick="true"
+										:data-testid="`cn-index-header-menu-${entry.key}`"
+										@click="onHeaderMenuLinkClick(entry, $event)">
+										<template v-if="entry.icon" #icon>
+											<CnIcon :name="entry.icon" :size="20" />
+										</template>
+										{{ entry.label }}
+									</NcActionLink>
 									<NcActionButton
 										v-else
 										:disabled="entry.disabled"
@@ -65,8 +87,12 @@
 										:closeAfterClick="true"
 										:data-testid="`cn-index-header-menu-${entry.key}`"
 										@click="entry.run()">
-										<template v-if="entry.icon" #icon>
-											<CnIcon :name="entry.icon" :size="20" />
+										<!-- A built-in ships its own icon (`iconComponent`), so it
+										     never falls back to the "?" when the app has not
+										     registered that icon name. -->
+										<template v-if="entry.iconComponent || entry.icon" #icon>
+											<component :is="entry.iconComponent" v-if="entry.iconComponent" :size="20" />
+											<CnIcon v-else :name="entry.icon" :size="20" />
 										</template>
 										{{ entry.label }}
 									</NcActionButton>
@@ -1028,7 +1054,7 @@
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
 import { translate as t } from '@nextcloud/l10n'
-import { NcActionButton, NcActionCaption, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcActionCaption, NcActionCheckbox, NcActionLink, NcActions, NcActionSeparator, NcButton, NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
 import { getCurrentInstance, inject, markRaw, ref } from 'vue'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Close from 'vue-material-design-icons/Close.vue'
@@ -1038,6 +1064,8 @@ import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import Export from 'vue-material-design-icons/Export.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
+import ImportIcon from 'vue-material-design-icons/Import.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import Tune from 'vue-material-design-icons/Tune.vue'
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline.vue'
 import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
@@ -1053,13 +1081,13 @@ import { createRefLabelResolver } from '../../composables/useRefLabels.js'
 import { useSavedViewsApi } from '../../composables/useSavedViewsApi.js'
 import { METADATA_COLUMNS } from '../../constants/metadata.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
-import { routeHref } from '../../utils/actionLink.js'
+import { followItemActionLink, resolveItemActionLink, routeHref } from '../../utils/actionLink.js'
 import { buildOnSuccessRoute, resolveRegisteredHandler } from '../../utils/actionsDispatcher.js'
 import { reportBindingProblems } from '../../utils/diagnostics.js'
 import { fetchFilterCounts } from '../../utils/fetchFilterCounts.js'
 import { buildExportUrl } from '../../utils/indexExportHelpers.js'
 import { lensUnavailableText } from '../../utils/lensAvailability.js'
-import { openRowTarget } from '../../utils/linkNavigation.js'
+import { isModifiedClick, openRowTarget } from '../../utils/linkNavigation.js'
 import { resolveClaimedTeams, resolveClaimTokens, splitViewsIntoTabs, viewAsTab, viewIdOf } from '../../utils/listLenses.js'
 import { LIST_SHORTCUTS, listPaletteCommands, shortcutFor } from '../../utils/listShortcuts.js'
 import { multiKeySort } from '../../utils/multiKeySort.js'
@@ -1352,6 +1380,7 @@ export default {
 		NcActionLink,
 		NcActionButton,
 		NcActionCaption,
+		NcActionSeparator,
 		NcActionCheckbox,
 		NcButton,
 		AlertCircleOutline,
@@ -1631,9 +1660,11 @@ export default {
 		 * actions, or what its `items` name (`header-actions`, a header action
 		 * id, `import`, `export`, `refresh`, `copy-selected`, `delete-selected`,
 		 * `documentation`), so the entries the bar's menu loses have a place.
+		 * `items` can group them: `{ heading }` draws a group heading (an i18n
+		 * key) and `separator` a rule, each only when an entry follows.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
-		 * @type {Array<{label?: string, action: string, variant?: ('primary'|'secondary'), icon?: string, format?: ('csv'|'excel'), id?: string, items?: string[]}>}
+		 * @type {Array<{label?: string, action: string, variant?: ('primary'|'secondary'), icon?: string, format?: ('csv'|'excel'), id?: string, items?: Array<(string|{heading: string})>}>}
 		 */
 		headerButtons: {
 			type: Array,
@@ -5560,7 +5591,10 @@ export default {
 						variant: button.variant === 'primary' ? 'primary' : 'secondary',
 						icon,
 						format: button.format === 'excel' ? 'excel' : 'csv',
-						items: Array.isArray(button.items) ? button.items.filter((item) => typeof item === 'string' && item !== '') : null,
+						items: Array.isArray(button.items)
+							? button.items.filter((item) => (typeof item === 'string' && item !== '')
+								|| (item && typeof item === 'object' && typeof item.heading === 'string' && item.heading !== ''))
+							: null,
 					}
 				})
 				.filter((button) => button.label !== '')
@@ -6855,11 +6889,14 @@ export default {
 		 * `import`, `export`, `refresh`, `copy-selected`, `delete-selected`
 		 * (disabled until a row is selected) and `documentation` (a link to
 		 * `documentationUrl`, left out when the page has none). An unknown name
-		 * is left out.
+		 * is left out. `{ heading }` and `separator` group the entries: an
+		 * entry of `kind` `heading` or `separator`, drawn only when an entry
+		 * follows it.
 		 *
 		 * @spec openspec/changes/screens-index-header-actions-menu/specs/index-header/spec.md#requirement-the-header-actions-menu-lists-what-its-items-name
-		 * @param {{items?: string[]|null, format?: string}} button The resolved header button.
-		 * @return {Array<{key: string, label: string, icon: string, href?: string, disabled?: boolean, title?: string, run?: Function}>}
+		 * @spec openspec/changes/screens-index-header-menu-headings/specs/index-header/spec.md#requirement-the-header-actions-menu-can-draw-group-headings-and-separators
+		 * @param {{items?: Array<(string|{heading: string})>|null, format?: string}} button The resolved header button.
+		 * @return {Array<{key: string, label: string, kind?: ('heading'|'separator'), icon?: string, href?: string, disabled?: boolean, title?: string, iconComponent?: object, run?: Function}>}
 		 */
 		headerMenuEntries(button) {
 			const fromAction = (entry) => ({
@@ -6867,14 +6904,18 @@ export default {
 				label: entry.label ? this.cnTranslate(entry.label) : '',
 				icon: entry.icon && typeof entry.icon === 'string' && !entry.icon.startsWith('icon-') ? entry.icon : '',
 				href: typeof entry.href === 'string' && entry.href !== '' ? entry.href : '',
+				// A `handler: "navigate"` entry whose route resolves carries `to`
+				// (resolveHeaderHandler drops its handler): the menu draws it as
+				// an in-app link, as the actions bar does, so it navigates.
+				link: !entry.href && entry.to && !entry.disabled ? resolveItemActionLink({ to: entry.to }, null, this.$router) : null,
 				disabled: Boolean(entry.disabled),
 				run: () => this.onHeaderAction({ action: entry.id, id: entry.id }),
 			})
 			const names = button && Array.isArray(button.items) ? button.items : ['header-actions']
 			const noSelection = this.internalSelectedIds.length < 1
 			const builtIns = {
-				import: () => ({ key: 'import', label: t('nextcloud-vue', 'Import'), icon: 'Import', run: () => { this.showImportDialog = true } }),
-				export: () => ({ key: 'export', label: t('nextcloud-vue', 'Export'), icon: 'Export', run: () => this.onHeaderButton({ action: 'export', format: button.format }) }),
+				import: () => ({ key: 'import', label: t('nextcloud-vue', 'Import'), icon: 'Import', iconComponent: ImportIcon, run: () => { this.showImportDialog = true } }),
+				export: () => ({ key: 'export', label: t('nextcloud-vue', 'Export'), icon: 'Export', iconComponent: Export, run: () => this.onHeaderButton({ action: 'export', format: button.format }) }),
 				refresh: () => ({ key: 'refresh', label: t('nextcloud-vue', 'Refresh'), icon: 'Refresh', run: () => this.onRefreshEvent() }),
 				'copy-selected': () => ({
 					key: 'copy-selected',
@@ -6889,6 +6930,7 @@ export default {
 					key: 'delete-selected',
 					label: t('nextcloud-vue', 'Delete selected'),
 					icon: 'TrashCanOutline',
+					iconComponent: TrashCanOutline,
 					disabled: noSelection,
 					title: noSelection ? t('nextcloud-vue', 'Select 1 or more items to delete') : '',
 					run: () => { this.showMassDeleteDialog = true },
@@ -6906,8 +6948,17 @@ export default {
 					entries.push(entry)
 				}
 			}
+			// A group heading (`{ heading }`) or a `separator` is kept as a mark
+			// and only drawn when an entry follows it (see groupMenuEntries).
+			let mark = 0
 			for (const name of names) {
-				if (name === 'header-actions') {
+				if (name && typeof name === 'object') {
+					mark += 1
+					entries.push({ key: `__heading-${mark}`, kind: 'heading', label: this.cnTranslate(name.heading) })
+				} else if (name === 'separator') {
+					mark += 1
+					entries.push({ key: `__separator-${mark}`, kind: 'separator', label: '' })
+				} else if (name === 'header-actions') {
 					this.mergedHeaderActions.forEach((entry) => push(fromAction(entry)))
 				} else if (Object.hasOwn(builtIns, name)) {
 					push(builtIns[name]())
@@ -6918,7 +6969,66 @@ export default {
 					}
 				}
 			}
-			return entries
+			return this.groupMenuEntries(entries)
+		},
+
+		/**
+		 * Tidy the marks of the header's Actions menu: a heading or separator
+		 * with no entry after it (before the next mark or the end) is dropped,
+		 * a separator never opens the menu, two separators in a row are one,
+		 * and a heading followed by a separator before any entry is dropped. So a group whose entries are all left out (no documentation
+		 * URL, an unknown id) leaves no empty heading or double rule behind,
+		 * and a menu of marks only has no entries and is not drawn.
+		 *
+		 * @spec openspec/changes/screens-index-header-menu-headings/specs/index-header/spec.md#requirement-the-header-actions-menu-can-draw-group-headings-and-separators
+		 * @param {Array<{key: string, kind?: string}>} entries The entries with their marks, in order.
+		 * @return {Array<{key: string, kind?: string}>} The entries to draw.
+		 */
+		groupMenuEntries(entries) {
+			const out = []
+			let separator = null
+			let heading = null
+			for (const entry of entries) {
+				if (entry.kind === 'separator') {
+					// A rule ends the group before it: a heading not yet followed
+					// by an entry is dropped with it.
+					separator = entry
+					heading = null
+					continue
+				}
+				if (entry.kind === 'heading') {
+					heading = entry
+					continue
+				}
+				if (separator && out.length > 0) {
+					out.push(separator)
+				}
+				if (heading) {
+					out.push(heading)
+				}
+				separator = null
+				heading = null
+				out.push(entry)
+			}
+			return out
+		},
+
+		/**
+		 * An in-app link of the header's Actions menu was clicked: a plain click
+		 * goes through the router (a modified click is left to the browser),
+		 * and the entry is reported as a header action, as the actions bar does.
+		 *
+		 * @spec openspec/changes/screens-index-header-actions-menu/specs/index-header/spec.md#requirement-the-header-actions-menu-lists-what-its-items-name
+		 * @param {{key: string, link: object}} entry The menu entry.
+		 * @param {MouseEvent} event The click.
+		 * @return {void}
+		 */
+		onHeaderMenuLinkClick(entry, event) {
+			if (isModifiedClick(event)) {
+				return
+			}
+			followItemActionLink(event, entry.link, this.$router)
+			this.$emit('header-action', { action: entry.key, id: entry.key })
 		},
 
 		/**

package/src/components/CnRadioCardsWidget/CnRadioCardsWidget.vue

@@ -4,7 +4,10 @@
 -->
 
 <template>
-	<fieldset class="cn-radio-cards" data-testid="cn-radio-cards" :aria-busy="busy ? 'true' : 'false'">
+	<fieldset class="cn-radio-cards"
+		:class="{ 'cn-radio-cards--list': isList }"
+		data-testid="cn-radio-cards"
+		:aria-busy="busy ? 'true' : 'false'">
 		<legend v-if="label" class="cn-radio-cards__legend">
 			{{ label }}
 		</legend>
@@ -52,7 +55,7 @@ let uid = 0
  * underneath, so the choice is perceivable without colour and works from the
  * keyboard.
  *
- * @spec openspec/changes/abstract-radio-cards/specs/radio-cards/spec.md
+ * @spec openspec/changes/abstract-radio-cards/specs/abstract-radio-cards/spec.md
  */
 export default {
 	name: 'CnRadioCardsWidget',
@@ -72,6 +75,7 @@ export default {
 		 * - `options` (required) — `[{ value, label, description? }]`.
 		 * - `label` — a legend over the cards (visually shown).
 		 * - `columns` — 1, 2 or 3 (default 2).
+		 * - `variant` — `cards` (the default) or `list`: a compact list of radio buttons, one per line, with the description under the label and no card around each (board DcBeheer). A list is one column.
 		 * - `readOnly`.
 		 *
 		 * @type {object}
@@ -133,7 +137,20 @@ export default {
 			return this.tr(this.content.label || '')
 		},
 
+		/**
+		 * Whether the options draw as a compact list (`variant: "list"`).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/screens-radio-cards-list/specs/radio-cards/spec.md#requirement-radio-cards-can-draw-as-a-compact-list
+		 */
+		isList() {
+			return this.content.variant === 'list'
+		},
+
 		columns() {
+			if (this.isList) {
+				return 1
+			}
 			return [1, 3].includes(this.content.columns) ? this.content.columns : 2
 		},
 
@@ -185,7 +202,7 @@ export default {
 		 *
 		 * @param {object} option The chosen option.
 		 * @return {Promise<void>}
-		 * @spec openspec/changes/abstract-radio-cards/specs/radio-cards/spec.md#requirement-choosing-a-card-saves-that-one-field
+		 * @spec openspec/changes/abstract-radio-cards/specs/abstract-radio-cards/spec.md#requirement-choosing-a-card-saves-that-one-field
 		 */
 		async choose(option) {
 			if ((!this.objectUrl && !this.hasSave) || !this.content.field) {
@@ -310,6 +327,40 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+/* `variant: "list"`: one radio button per line, the description under the
+   label, no card around each (board DcBeheer, "Soort organisatie"). */
+.cn-radio-cards--list .cn-radio-cards__grid {
+	gap: 8px;
+}
+
+.cn-radio-cards--list .cn-radio-cards__card,
+.cn-radio-cards--list .cn-radio-cards__card--selected {
+	padding: 0;
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+	box-shadow: none;
+	font-size: 15px;
+}
+
+.cn-radio-cards--list .cn-radio-cards__dot {
+	width: 18px;
+	height: 18px;
+	margin-top: 2px;
+}
+
+.cn-radio-cards--list .cn-radio-cards__card--selected .cn-radio-cards__dot {
+	border-width: 5px;
+}
+
+.cn-radio-cards--list .cn-radio-cards__title {
+	font-weight: 400;
+}
+
+.cn-radio-cards--list .cn-radio-cards__description {
+	font-size: 13px;
+}
+
 @media (max-width: 640px) {
 	.cn-radio-cards__grid--2,
 	.cn-radio-cards__grid--3 {

package/src/components/CnReportsPage/CnReportsPage.vue

@@ -32,7 +32,7 @@
   Spec: hydra openspec/architecture/adr-112-reports-are-one-page.md (ConductionNL/hydra#640).
 -->
 <template>
-	<div class="cn-reports-page">
+	<div class="cn-reports-page" :class="{ 'cn-reports-page--board': isBoard }">
 		<div class="cn-reports-page__header">
 			<h2 class="cn-reports-page__title">
 				{{ resolvedTitle }}
@@ -42,7 +42,44 @@
 			</p>
 		</div>
 
-		<div v-if="categoryOptions.length > 1" class="cn-reports-page__filter">
+		<!-- The board look (board DcRapportages): one section per category,
+		     headed by its label, instead of the category filter; each card
+		     draws its icon in a tile. -->
+		<template v-if="isBoard">
+			<p v-if="resolvedCards.length === 0"
+				class="cn-reports-page__empty"
+				data-testid="cn-reports-empty">
+				{{ resolvedEmptyLabel }}
+			</p>
+			<section v-for="section in boardSections"
+				:key="section.key"
+				class="cn-reports-page__section"
+				data-testid="cn-reports-section">
+				<h3 v-if="section.label" class="cn-reports-page__section-title">
+					{{ section.label }}
+				</h3>
+				<ul class="cn-reports-page__grid" data-testid="cn-reports-grid">
+					<li v-for="card in section.cards" :key="card.id" class="cn-reports-page__cell">
+						<a class="cn-reports-page__card"
+							data-testid="cn-report-card"
+							:href="hrefFor(card)"
+							@click="open(card, $event)">
+							<span v-if="card.icon" class="cn-reports-page__card-icon" aria-hidden="true">
+								<CnIcon :name="card.icon" :size="22" />
+							</span>
+							<span class="cn-reports-page__card-text">
+								<span class="cn-reports-page__card-title">{{ card.label }}</span>
+								<span v-if="card.description" class="cn-reports-page__card-description">
+									{{ card.description }}
+								</span>
+							</span>
+						</a>
+					</li>
+				</ul>
+			</section>
+		</template>
+
+		<div v-if="!isBoard && categoryOptions.length > 1" class="cn-reports-page__filter">
 			<label class="cn-reports-page__filter-label" :for="filterId">
 				{{ resolvedCategoryLabel }}
 			</label>
@@ -58,13 +95,13 @@
 			</select>
 		</div>
 
-		<p v-if="visibleCards.length === 0"
+		<p v-if="!isBoard && visibleCards.length === 0"
 			class="cn-reports-page__empty"
 			data-testid="cn-reports-empty">
 			{{ resolvedEmptyLabel }}
 		</p>
 
-		<ul v-else class="cn-reports-page__grid" data-testid="cn-reports-grid">
+		<ul v-else-if="!isBoard" class="cn-reports-page__grid" data-testid="cn-reports-grid">
 			<li v-for="card in visibleCards" :key="card.id" class="cn-reports-page__cell">
 				<a class="cn-reports-page__card"
 					data-testid="cn-report-card"
@@ -98,6 +135,8 @@
  */
 import { translate as t } from '@nextcloud/l10n'
 import { defineAsyncComponent } from 'vue'
+import CnIcon from '../CnIcon/CnIcon.vue'
+import { useLook } from '../../composables/useLook.js'
 import { followLinkClick } from '../../utils/linkNavigation.js'
 
 export default {
@@ -107,6 +146,7 @@ export default {
 		// Loaded only for a page that declares widgets: a cards-only reports
 		// page does not pull the dashboard in.
 		CnDashboardPage: defineAsyncComponent(() => import('../CnDashboardPage/CnDashboardPage.vue').then((m) => m.default)),
+		CnIcon,
 	},
 
 	inject: {
@@ -228,6 +268,17 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * The look to draw in: `board` or `nextcloud`. Absent: the look
+		 * CnAppRoot provides (`cnLook`), else `nextcloud`.
+		 *
+		 * @type {string|null}
+		 */
+		look: {
+			type: String,
+			default: null,
+		},
+
 		/**
 		 * Translate function. Falls back to injected `cnTranslate`.
 		 *
@@ -239,6 +290,11 @@ export default {
 		},
 	},
 
+	setup(props) {
+		const { isBoard } = useLook(props)
+		return { isBoard }
+	},
+
 	data() {
 		return {
 			activeCategory: 'all',
@@ -385,6 +441,30 @@ export default {
 			return options
 		},
 
+		/**
+		 * The board look's sections: the cards without a category first, under
+		 * no heading, then one section per declared category that holds a
+		 * card, in the declared order, headed by its label.
+		 *
+		 * @spec openspec/changes/screens-reports-page-board-look/specs/reports-page/spec.md#requirement-the-reports-page-takes-the-board-look
+		 * @return {Array<{key: string, label: string, cards: Array<object>}>} The sections.
+		 */
+		boardSections() {
+			const declared = this.config.categories || {}
+			const sections = []
+			const loose = this.resolvedCards.filter((card) => !card.category || !Object.hasOwn(declared, card.category))
+			if (loose.length > 0) {
+				sections.push({ key: '__none', label: '', cards: loose })
+			}
+			for (const key of Object.keys(declared)) {
+				const cards = this.resolvedCards.filter((card) => card.category === key)
+				if (cards.length > 0) {
+					sections.push({ key, label: this.tr(declared[key]), cards })
+				}
+			}
+			return sections
+		},
+
 		/**
 		 * The cards the active filter admits.
 		 *