@conduction/nextcloud-vue 2.77.0 → 2.79.0

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -254,6 +254,11 @@ export default {
 		cnLook: { default: 'nextcloud' },
 		/** The tab list's name under the board look, provided by CnDetailPage (`config.tabsLabel`). */
 		cnDetailTabsLabel: { default: null },
+		/**
+		 * The host's translate (CnAppRoot provides `cnTranslate`), so a tab
+		 * label written in the manifest reads in the user's language.
+		 */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	props: {
@@ -471,7 +476,7 @@ export default {
 					key: `${widgetId || 'tab'}-${index}`,
 					id: (tab && typeof tab === 'object' && tab.id) || widgetId || '',
 					widgetId,
-					label: (tab && tab.label) || (this.isBoard && isActivityWidget(widget) ? t('nextcloud-vue', 'History') : '') || widgetTitleOf(widget) || widgetId || '',
+					label: this.tabLabel(tab, widget, widgetId),
 					icon: (tab && tab.icon) || widget?.icon || '',
 					widget,
 					count,
@@ -652,6 +657,30 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The label a tab shows: the authored `label`, else (board look) History
+		 * for the activity widget, else the child widget's title, else its id.
+		 * A manifest label or title goes through the host's translate; the
+		 * library's own History is translated by the library catalogue.
+		 *
+		 * @param {object|string} tab The `content.tabs[]` entry.
+		 * @param {object|null} widget The widget definition it names.
+		 * @param {string} widgetId The widget id.
+		 * @return {string} The label.
+		 * @spec openspec/changes/screens-detail-labels-parity/specs/detail-labels-board-look/spec.md#requirement-detail-labels-read-in-the-users-language
+		 */
+		tabLabel(tab, widget, widgetId) {
+			const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key
+			if (tab && typeof tab.label === 'string' && tab.label !== '') {
+				return translate(tab.label)
+			}
+			if (this.isBoard && isActivityWidget(widget)) {
+				return t('nextcloud-vue', 'History')
+			}
+			const title = widgetTitleOf(widget)
+			return title ? translate(title) : (widgetId || '')
+		},
+
 		/**
 		 * Whether a tab shows: `visible`, `hidden`, or `pending` while its
 		 * condition cannot be decided yet (object not loaded, count not back).

package/src/components/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -323,6 +323,19 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Fit the table to the tile: the title column (a column's `grow: true`,
+		 * else `title` or `name`, else the first) shrinks and ends in an
+		 * ellipsis so the trailing columns stay visible. On by default; pass
+		 * `false` for the table's own auto layout. Forwarded to CnDataTable.
+		 *
+		 * @spec openspec/changes/narrow-object-table-widgets/specs/narrow-object-table-widgets/spec.md#requirement-a-narrow-object-table-keeps-its-trailing-columns-in-view
+		 */
+		fitWidth: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Route NAME for row-click navigation. Mapped onto CnDataTable's
 		 * `rowClickRoute` as `{ name: rowRoute, params: { id } }` with the

package/src/components/index.js

@@ -109,7 +109,7 @@ export { CnTreeView } from './CnTreeView/index.js'
 export { CnUserActionMenu } from './CnUserActionMenu/index.js'
 export { CnNotesCard } from './CnNotesCard/index.js'
 export { CnTasksCard } from './CnTasksCard/index.js'
-export { CnFilesBrowser } from './CnFilesBrowser/index.js'
+export { CnFilesBrowser, createOpenRegisterSource } from './CnFilesBrowser/index.js'
 export { CnFilesCard } from './CnFilesCard/index.js'
 export { CnFileManager } from './CnFileManager/index.js'
 export { CnRelatedFiles } from './CnRelatedFiles/index.js'

package/src/composables/__tests__/useObjectPresence.spec.js

@@ -40,6 +40,7 @@ jest.mock('@nextcloud/router', () => ({
 jest.mock('@nextcloud/auth', () => ({
 	__esModule: true,
 	getCurrentUser: () => ({ uid: 'anna' }),
+	getRequestToken: () => 'token-123',
 }))
 
 /** The subscription the composable made, so a test can push into it. */
@@ -246,6 +247,29 @@ describe('useObjectPresence', () => {
 		scope.stop()
 	})
 
+	it('🔴 a closing tab departs with a beacon that carries the request token', async () => {
+		// A beacon cannot set headers, and the departure route keeps the CSRF
+		// check, so the token has to travel in the form body. The old beacon
+		// sent no body at all and could never pass that check.
+		const sendBeacon = jest.fn(() => true)
+		const original = navigator.sendBeacon
+		Object.defineProperty(navigator, 'sendBeacon', { value: sendBeacon, configurable: true, writable: true })
+		try {
+			await withPresence(async () => {
+				await nextTick()
+				await Promise.resolve()
+				window.dispatchEvent(new Event('beforeunload'))
+			})
+		} finally {
+			Object.defineProperty(navigator, 'sendBeacon', { value: original, configurable: true, writable: true })
+		}
+
+		const call = sendBeacon.mock.calls.find(([url]) => url === '/apps/openregister/api/objects/dossiq/case/case-1/presence?_method=DELETE')
+		expect(call).toBeDefined()
+		expect(call[1]).toBeInstanceOf(FormData)
+		expect(call[1].get('requesttoken')).toBe('token-123')
+	})
+
 	it('does nothing at all when disabled', async () => {
 		const scope = effectScope()
 		scope.run(() => {

package/src/composables/useAppManifest.js

@@ -205,6 +205,7 @@ function loadInMemory(input) {
  * @param {object} options Configuration options (endpoint / fetcher /
  *   getAppConfigValue overrides).
  * @return {{ manifest: import('vue').Ref<object>, isLoading: import('vue').Ref<boolean>, validationErrors: import('vue').Ref<string[]|null>, unresolvedSentinels: import('vue').Ref<string[]> }}
+ * @spec openspec/changes/manifest-validator-self-contained/specs/manifest-validator-self-contained/spec.md#requirement-a-backend-manifest-delta-reaches-the-navigation
  */
 function loadFromBackend(appId, bundledManifest, options) {
 	// Shallow by default (manifest-shallow-reactivity-by-default) — see
@@ -284,9 +285,13 @@ function loadFromBackend(appId, bundledManifest, options) {
 			// The shallowRef reassignment is what re-renders consumers; the new
 			// object stays shallow (not deep-observed) unless CnAppRoot upgrades it.
 			manifest.value = resolved
-		} catch {
-			// Defensive: any unexpected error leaves the bundled manifest in
-			// place. Apps without a backend endpoint keep working.
+		} catch (error) {
+			// Any unexpected error leaves the bundled manifest in place, so
+			// apps keep working. Say so: a silent catch here once hid a
+			// validator that threw on every manifest, and the backend delta
+			// never reached the navigation.
+			// eslint-disable-next-line no-console
+			console.warn('[useAppManifest] Could not resolve the manifest; keeping the bundled manifest.', error)
 		} finally {
 			isLoading.value = false
 		}

package/src/composables/useFormDraft.js

@@ -127,12 +127,22 @@ export function readDraft(key, { objectUpdated = '', now = Date.now() } = {}) {
  * What the draft indicator says: "Saving" while a local write is pending,
  * "Saved just now" / "Saved 3 minutes ago" once it landed, nothing before that.
  *
+ * After a failed save (`options.saveFailed`) it never says Saving or Saved:
+ * next to a server error those words read as if the record had been saved.
+ * It then says "Draft kept on this device" when a local copy is stored, and
+ * nothing otherwise.
+ *
  * @param {string} state `idle`, `saving` or `saved`.
  * @param {number} [savedAt] When the last write landed, in epoch ms.
  * @param {number} [now] The current epoch ms, for testing.
+ * @param {{saveFailed?: boolean}} [options] `saveFailed`: the form shows a failed save.
  * @return {string} The text, or '' when it says nothing.
+ * @spec openspec/changes/cell-labels-and-draft-indicator/specs/cell-labels-and-draft-indicator/spec.md#requirement-the-draft-indicator-never-reads-as-a-server-save-after-a-failed-save
  */
-export function draftIndicatorText(state, savedAt = 0, now = Date.now()) {
+export function draftIndicatorText(state, savedAt = 0, now = Date.now(), options = {}) {
+	if (options && options.saveFailed === true) {
+		return state === 'saved' ? t('nextcloud-vue', 'Draft kept on this device') : ''
+	}
 	if (state === 'saving') {
 		return t('nextcloud-vue', 'Saving')
 	}

package/src/composables/useObjectPresence.js

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: EUPL-1.2
 // Copyright (C) 2026 Conduction B.V.
 
-import { getCurrentUser } from '@nextcloud/auth'
+import { getCurrentUser, getRequestToken } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { computed, getCurrentScope, onScopeDispose, ref, unref, watch } from 'vue'
@@ -201,7 +201,15 @@ export function useObjectPresence(register, schema, objectUuid, options = {}) {
 	 * the browser and survives the navigation, which is the only mechanism
 	 * that does.
 	 *
+	 * 🔴 THE TOKEN RIDES IN THE BODY. A beacon cannot set headers, so the
+	 * `requesttoken` header axios adds is missing, and the departure route
+	 * keeps Nextcloud's CSRF check. Nextcloud also reads the token from a
+	 * POST field, so it goes in a form body. Without it the beacon answers
+	 * 412; before OpenRegister registered POST on `/presence` it answered 405
+	 * (seen on cloud.conduction.nl on every dossiq case page).
+	 *
 	 * @return {void}
+	 * @spec openspec/changes/no-calls-to-missing-apps-and-presence-beacon/specs/object-presence/spec.md#requirement-a-closing-tab-departs-through-a-route-that-exists
 	 */
 	function beaconDepart() {
 		const url = presenceUrl()
@@ -209,9 +217,12 @@ export function useObjectPresence(register, schema, objectUuid, options = {}) {
 			return
 		}
 		try {
-			// No DELETE from a beacon — it is always a POST — so the server's
-			// own POST release path is used. Both reach one implementation.
-			navigator.sendBeacon?.(url.replace(/\/presence$/, '/presence?_method=DELETE'))
+			// No DELETE from a beacon, it is always a POST, so the server's
+			// POST departure route is used, marked `_method=DELETE`. Both reach
+			// one implementation.
+			const body = new FormData()
+			body.append('requesttoken', getRequestToken() || '')
+			navigator.sendBeacon?.(url.replace(/\/presence$/, '/presence?_method=DELETE'), body)
 		} catch {
 			// Best effort.
 		}

package/src/css/badge.css

@@ -2,6 +2,15 @@
    @conduction/nextcloud-vue — Status Badge
    ======================================== */
 
+/* The two board tones without a Nextcloud colour role (screens-cell-pill-parity).
+   A theme may redefine them; the six role variants below use Nextcloud's own. */
+:root {
+	--cn-status-purple-bg: #e8e6f6;
+	--cn-status-purple-text: #4a3f8f;
+	--cn-status-teal-bg: #e3f1f3;
+	--cn-status-teal-text: #1d5e66;
+}
+
 .cn-status-badge {
 	display: inline-flex;
 	align-items: center;
@@ -51,6 +60,18 @@
 	color: var(--color-info-text, var(--color-info, #0082c9));
 }
 
+/* Work in progress ("In behandeling"), a board tone. */
+.cn-status-badge--purple {
+	background-color: var(--cn-status-purple-bg);
+	color: var(--cn-status-purple-text);
+}
+
+/* Handed on ("Omgezet naar een zaak"), a board tone. */
+.cn-status-badge--teal {
+	background-color: var(--cn-status-teal-bg);
+	color: var(--cn-status-teal-text);
+}
+
 /* Solid variants — solid background with white text for use on colored backgrounds */
 .cn-status-badge--solid.cn-status-badge--default {
 	background-color: var(--color-background-dark);
@@ -81,3 +102,13 @@
 	background-color: var(--color-info, #0082c9);
 	color: white;
 }
+
+.cn-status-badge--solid.cn-status-badge--purple {
+	background-color: var(--cn-status-purple-text);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--teal {
+	background-color: var(--cn-status-teal-text);
+	color: white;
+}

package/src/css/kpi-card.css

@@ -463,6 +463,57 @@ a.cn-kpi-card--stacked:focus-visible {
 	gap: 6px;
 }
 
+/* A linked board tile is one link: the label is not underlined link text, in
+   any layout (screens-stat-tile-parity). The NL Design theme underlines every
+   `a` with `!important`, so the opt-out needs it too. */
+a.cn-kpi-card--board,
+a.cn-kpi-card--board:hover,
+a.cn-kpi-card--board:focus-visible,
+a.cn-kpi-card--board * {
+	text-decoration: none !important;
+}
+
+/* `content.iconPlacement: "end"` (DqDashboard): label left, the icon in a
+   32px circle right, tinted by the tile's state. */
+.cn-kpi-card--board .cn-kpi-card__title--badge-end {
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.cn-kpi-card__badge {
+	display: inline-flex;
+	flex: 0 0 auto;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	margin-inline-start: auto;
+	border-radius: 50%;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	background: var(--color-primary-element-light, color-mix(in srgb, var(--color-primary-element) 12%, transparent));
+}
+
+.cn-kpi-card__badge svg {
+	width: 18px;
+	height: 18px;
+	fill: currentcolor;
+}
+
+.cn-kpi-card__badge--success {
+	color: var(--color-text-success, var(--color-success-text));
+	background: color-mix(in srgb, var(--color-text-success, var(--color-success-text)) 12%, var(--color-main-background));
+}
+
+.cn-kpi-card__badge--warning {
+	color: var(--color-element-warning, var(--color-warning-text));
+	background: color-mix(in srgb, var(--color-element-warning, var(--color-warning-text)) 12%, var(--color-main-background));
+}
+
+.cn-kpi-card__badge--error {
+	color: var(--color-text-error, var(--color-error-text));
+	background: color-mix(in srgb, var(--color-text-error, var(--color-error-text)) 10%, var(--color-main-background));
+}
+
 .cn-kpi-card__glyph {
 	display: inline-flex;
 	flex: 0 0 auto;

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

@@ -112,6 +112,16 @@
 	gap: 20px;
 }
 
+/* GridStack insets every cell by its 12px margin, the outer edge included, so
+   the tab strip started 12px below the top of the body column and stopped 12px
+   short of its end, while the side column started at the top. Pulling the grid
+   out by that margin puts its first card on the column's edges: the side column
+   is level with the strip, and the strip ends where the body column ends. */
+.cn-look-board.cn-detail-page--with-side > .cn-detail-page__body > .cn-detail-page__grid {
+	margin: -12px;
+	width: auto;
+}
+
 /* ---- Folder tabs ------------------------------------------------------- */
 
 /* The strip draws no line of its own (design-system pull request 147). The card under it

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

@@ -45,6 +45,42 @@
 	margin-inline-start: 0;
 }
 
+/* The header buttons keep the board's button under a theme that styles every
+   secondary or primary button with `!important` (the nldesign theme: a
+   primary border, 8px 16px padding): Download and the Actions menu are 40px,
+   a grey border on the main background (PqTickets, DqZaken), the primary
+   button is the primary fill without a border. The buildiq square is not a
+   direct child button and keeps its own rule. */
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .button-vue--secondary,
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .action-item .button-vue {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 14px !important;
+	border: 1px solid var(--color-border-dark) !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-main-background) !important;
+	color: var(--color-main-text) !important;
+}
+
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .button-vue--secondary:hover,
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .action-item .button-vue:hover {
+	background: var(--color-background-hover) !important;
+}
+
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .button-vue--primary {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 16px !important;
+	border: 0 !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-primary-element) !important;
+	color: var(--color-primary-element-text) !important;
+}
+
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .button-vue--primary:hover {
+	background: var(--color-primary-element-hover) !important;
+}
+
 /* ----------------------------------------------------------------- toolbar */
 
 /* No band, no padding, no radius. The DOM is already in reading order (row 1,
@@ -71,16 +107,27 @@
 	margin-inline-start: 0;
 }
 
-/* The first of Save view, Filter and the view switch takes the free space, so
-   the three sit at the end of row 1. */
-.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > :is(.cn-saved-views__save, .cn-actions-bar__filter-button, .cn-actions-bar__view-toggle) {
+/* The first of Save view and the Filter + view switch unit takes the free
+   space (the board's `flex: 1` spacer), so they sit at the end of row 1.
+   When the line is full the unit wraps as one to the START of the next line
+   while Save view stays at the end of row 1 (DqZaken); without Save view the
+   unit sits at the end of row 1 (PqTickets, PqLeads, PtPortals). */
+.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > :is(.cn-saved-views__save, .cn-actions-bar__view-controls) {
 	margin-inline-start: auto;
 }
 
-.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > :is(.cn-saved-views__save, .cn-actions-bar__filter-button, .cn-actions-bar__view-toggle) ~ :is(.cn-saved-views__save, .cn-actions-bar__filter-button, .cn-actions-bar__view-toggle) {
+.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > .cn-saved-views__save ~ .cn-actions-bar__view-controls {
 	margin-inline-start: 0;
 }
 
+.cn-look-board .cn-actions-bar--board .cn-actions-bar__view-controls {
+	display: flex;
+	flex: 0 0 auto;
+	flex-wrap: nowrap;
+	align-items: center;
+	gap: 8px;
+}
+
 /* Row 2: the search field and the active filters on a line of their own. */
 .cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--search {
 	display: flex;
@@ -166,16 +213,39 @@
 	color: var(--color-primary-element-text);
 }
 
-/* Save view: 34px, radius 17, on the light primary tint. */
+/* Save view: a ghost button, 34px, radius 17, no border, on the light primary
+   tint, a 14px icon 6px before the label, on one line. */
 .cn-look-board .cn-saved-views__save .button-vue {
 	min-height: 34px;
 	height: 34px;
-	padding: 0 14px;
+	padding: 0 12px;
+	border: 0;
 	border-radius: 17px;
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 	font-size: 13px;
 	font-weight: 600;
+	white-space: nowrap;
+}
+
+.cn-look-board .cn-saved-views__save .button-vue:hover {
+	background: var(--color-primary-element-light-hover);
+}
+
+.cn-look-board .cn-saved-views__save .button-vue .button-vue__wrapper {
+	gap: 6px;
+}
+
+.cn-look-board .cn-saved-views__save .button-vue .button-vue__icon {
+	width: auto;
+	min-width: 0;
+	height: auto;
+	min-height: 0;
+}
+
+.cn-look-board .cn-saved-views__save .button-vue .button-vue__text {
+	margin: 0;
+	padding: 0;
 }
 
 /* Filter: a labelled secondary button, 36px, radius 8, with the active count. */
@@ -407,6 +477,29 @@
 	text-decoration: none;
 }
 
+/* Only the title is underlined (DqZaken). An underline set on the cell
+   reaches every in-flow child whatever its own text-decoration, so the
+   secondary lines become inline blocks on a line of their own: an atomic
+   inline box is the one thing the underline does not reach. */
+.cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-table-cell__secondary {
+	display: inline-block;
+	width: 100%;
+	vertical-align: top;
+}
+
+/* `rowTitle: "plain"` (PqTickets, OcPublicaties): the title is bold text in
+   the main text colour without an underline, the secondary line 13px muted,
+   2px under it. The row stays clickable through its stretched row link. */
+.cn-look-board .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title {
+	font-weight: 700;
+	text-decoration: none;
+}
+
+.cn-look-board .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title .cn-table-cell__secondary {
+	margin-top: 2px;
+	font-size: 13px;
+}
+
 /* A status pill: 3px 10px, radius 12, 13px weight 600. The colours stay the
    status colour map's. */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-status-badge {
@@ -429,15 +522,36 @@
 	--default-clickable-area: 34px;
 }
 
+/* The row menu: a 34px square, three dots, a grey border on the main
+   background (DqZaken, PqTickets). A theme that styles every secondary button
+   with `!important` (the nldesign theme: a primary border, 8px 16px padding,
+   `min-width: max-content`) would otherwise turn it into a 64px wide button
+   with a blue border, so the board values are `!important` too. */
+.cn-look-board .cn-row-actions--board .button-vue,
+.cn-look-board .cn-row-actions--board .button-vue:hover,
+.cn-look-board .cn-row-actions--board .button-vue:focus {
+	box-sizing: border-box !important;
+	width: 34px !important;
+	min-width: 34px !important;
+	height: 34px !important;
+	min-height: 34px !important;
+	padding: 0 !important;
+	border: 1px solid var(--color-border-dark) !important;
+	border-radius: 8px !important;
+	color: var(--cn-board-text-soft) !important;
+}
+
 .cn-look-board .cn-row-actions--board .button-vue {
-	width: 34px;
-	min-width: 34px;
-	height: 34px;
-	min-height: 34px;
-	padding: 0;
-	border: 1px solid var(--color-border-dark);
-	border-radius: 8px;
-	background: var(--color-main-background);
+	background: var(--color-main-background) !important;
+}
+
+.cn-look-board .cn-row-actions--board .button-vue:hover {
+	background: var(--color-background-hover) !important;
+}
+
+.cn-look-board .cn-row-actions--board .button-vue:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
 }
 
 /* ------------------------------------------------------------------ footer */

package/src/css/look-board.css

@@ -146,6 +146,14 @@
 	margin-inline-start: -264px;
 }
 
+/* The navigation draws the line between it and the content. NcContent draws a
+   second one on the content while the navigation is open, which doubled the
+   line and put the page 1px further from the navigation than the board's 28px.
+   Outranks NcContent's rule (six classes) with seven. */
+.cn-look-board .app-navigation[data-testid="cn-nav"]:not(.app-navigation--closed):not(.app-navigation--close) ~ .app-content.app-content {
+	border-inline-start: none;
+}
+
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__content {
 	box-sizing: border-box;
 	gap: 20px;
@@ -155,6 +163,31 @@
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__list {
 	height: auto;
 	flex: 1 1 auto;
+	margin: 0;
+	gap: 2px;
+}
+
+/* The board's vertical rhythm (AppZijbalk): the primary action 20px from the
+   top, the list 20px under it, entries 2px apart. An empty search slot is a
+   flex child too and pushed everything 20px down, so it goes. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__search:empty {
+	display: none;
+}
+
+/* A caption is a 12px label with 6px under it, 20px after the group above
+   and 2px before its first entry. NcAppNavigationCaption gives its name a
+   15px font on a 34px line, which made it 44px high. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation__list > .app-navigation-caption:not(:first-child) {
+	margin-top: 18px;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-caption .app-navigation-caption__name {
+	margin: 0;
+	padding: 0;
+	font-size: inherit;
+	font-weight: inherit;
+	line-height: normal;
+	color: inherit;
 }
 
 .cn-look-board .app-navigation[data-testid="cn-nav"] .app-navigation-entry,
@@ -239,6 +272,43 @@
 	font-size: 15px;
 }
 
+/* The footer of the board: Help and Advanced as two 40px rows at weight 400,
+   2px apart. The Help row kept the 42px of a list entry, and the Advanced
+   foldout drew a 34px button inside 4px of padding, 20px under Help. */
+.cn-look-board .app-navigation[data-testid="cn-nav"] .cn-app-nav__footer-list {
+	gap: 2px;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .cn-app-nav__footer-list .app-navigation-entry,
+.cn-look-board .app-navigation[data-testid="cn-nav"] .cn-app-nav__footer-list .app-navigation-entry-link {
+	min-height: 40px;
+	font-weight: 400;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] [data-testid="cn-nav-settings"] {
+	padding: 0;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] .cn-app-nav__footer-list + [data-testid="cn-nav-settings"] {
+	margin-top: -18px;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] [data-testid="cn-nav-settings"] > :first-child {
+	margin: 0;
+}
+
+.cn-look-board .app-navigation[data-testid="cn-nav"] [data-testid="cn-nav-settings"] > :first-child .button-vue {
+	box-sizing: border-box;
+	width: 100%;
+	height: 40px;
+	min-height: 40px;
+	padding: 0 10px;
+	border-radius: 8px;
+	font-size: 15px;
+	font-weight: 400;
+	justify-content: flex-start;
+}
+
 /* The card above the footer, pushed down. */
 .cn-look-board .cn-app-nav__card {
 	order: 0;
@@ -435,3 +505,18 @@
 	color: var(--color-main-text);
 	opacity: 1;
 }
+
+/* ---- Status pills (screens-cell-pill-parity) ---------------------------- */
+/* The board draws a primary pill in the deep primary ink on the light primary
+   ground ("Verzoek", "Nieuw"); the default look keeps the brighter
+   primary-element text. The other tones already match the board. */
+.cn-look-board .cn-status-badge--primary:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
+	color: var(--color-primary-element-light-text);
+}
+
+/* ---- Date and age cells (screens-cell-date-parity) ---------------------- */
+/* The board sets every waiting time ("3 dagen", "4 uur") in weight 600; a
+   late one is red through its variant class. */
+.cn-look-board .cn-cell-renderer__age:not(.cn-look-nextcloud *) {
+	font-weight: 600;
+}