@conduction/nextcloud-vue 2.141.0 → 2.143.0

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

@@ -824,6 +824,15 @@
 	padding: 10px 12px;
 }
 
+/* A table on a settings card draws its head 42.5px, as DqInstellingen and
+   DqVthInstellingen do, also when no head cell carries a control that makes
+   it that tall (the VTH tables read 37.5px).
+   @spec openspec/changes/board-settings-table-head-height/specs/settings-board-look/spec.md */
+.cn-look-board .settings-section .cn-table-container--board .cn-data-table thead th:not(.cn-look-nextcloud *) {
+	height: 42.5px;
+	box-sizing: border-box;
+}
+
 .cn-look-board .cn-table-container--board:not(.cn-index-page__main--table > *) .cn-data-table td {
 	padding: 11px 12px;
 }
@@ -900,11 +909,13 @@
    `#content[class*="app-"]`, an id selector no class rule outranks, so a plain
    `content-box` here was ignored and the cell left 12px for the checkbox (the
    header's checkbox showed as a stray bracket). */
+/* The checkbox starts 20px in, as the boards draw a native checkbox (16px of
+   cell padding and its 4px margin; DqZoekresultaten), in the same 60px. */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox {
 	box-sizing: border-box !important;
 	width: 60px;
 	min-width: 60px;
-	padding-inline: 16px;
+	padding-inline: 20px 12px;
 	text-align: start;
 }
 
@@ -1008,6 +1019,19 @@
 	font-weight: 700;
 }
 
+/* `widgetProps.tone: "neutral"`: the grey person chip (DqContacten), 13px,
+   12px before the name.
+   @spec openspec/changes/board-avatar-chip/specs/data-table/spec.md#requirement-a-board-avatar-cell-draws-the-initials-chip */
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials--neutral {
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+	font-size: 13px;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar:has(.cn-cell-renderer__avatar-initials--neutral) {
+	gap: 12px;
+}
+
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {
 	text-decoration: underline;
 	text-underline-offset: 2px;
@@ -1687,6 +1711,36 @@
 	margin-bottom: 16px;
 }
 
+/* The heading sits above the list card, not inside it (DqAfdelingen: "Vergunningen"
+   and its line, then the card): with a heading the list area is unframed and
+   its table and footer carry the card.
+   @spec openspec/changes/board-folder-scope-outside-card/specs/index-page/spec.md#requirement-the-selected-folder-heads-the-list-from-outside-its-card */
+.cn-look-board .cn-index-page__main.cn-index-page__main--table:has(> .cn-index-page__scope-heading) {
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+	overflow: visible;
+}
+
+.cn-look-board .cn-index-page__main--table:has(> .cn-index-page__scope-heading) > .cn-table-container.cn-table-container--board {
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-board-card-radius, 12px);
+	background: var(--color-main-background);
+	overflow: hidden;
+}
+
+.cn-look-board .cn-index-page__main--table:has(> .cn-index-page__scope-heading):has(> .cn-index-page__pagination) > .cn-table-container.cn-table-container--board {
+	border-bottom: 0;
+	border-radius: var(--cn-board-card-radius, 12px) var(--cn-board-card-radius, 12px) 0 0;
+}
+
+.cn-look-board .cn-index-page__main--table:has(> .cn-index-page__scope-heading) > .cn-index-page__pagination {
+	border: 1px solid var(--color-border);
+	border-top: 0;
+	border-radius: 0 0 var(--cn-board-card-radius, 12px) var(--cn-board-card-radius, 12px);
+	background: var(--color-main-background);
+}
+
 .cn-look-board .cn-index-page__scope-title {
 	font-size: 20px;
 	font-weight: 700;
@@ -2184,3 +2238,43 @@
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
+
+/* A table's leading icon on a 32px tile, radius 8, an 18px glyph, 12px
+   before the title (DqOrganisaties, PqOrganisaties: teal; most boards: the
+   light primary). The tile's tone is the page's `rowIconTone`.
+   @spec openspec/changes/board-row-icon-tile/specs/data-table/spec.md#requirement-a-board-tables-leading-icon-sits-on-a-tile */
+.cn-look-board .cn-data-table td.cn-table-col--icon,
+.cn-look-board .cn-data-table th.cn-table-col--icon {
+	width: 48px;
+	padding-inline: 16px 0;
+}
+
+.cn-look-board .cn-data-table td.cn-table-col--icon .material-design-icon {
+	width: 32px;
+	height: 32px;
+	border-radius: 8px;
+	justify-content: center;
+	align-items: center;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+}
+
+.cn-look-board .cn-data-table td.cn-table-col--icon-teal .material-design-icon {
+	background: var(--cn-status-teal-bg);
+	color: var(--cn-status-teal-text);
+}
+
+.cn-look-board .cn-data-table td.cn-table-col--icon-neutral .material-design-icon {
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-data-table td.cn-table-col--icon .material-design-icon svg {
+	width: 18px;
+	height: 18px;
+}
+
+.cn-look-board .cn-data-table td.cn-table-col--icon + td,
+.cn-look-board .cn-data-table th.cn-table-col--icon + th {
+	padding-inline-start: 12px;
+}

package/src/css/look-board.css

@@ -1458,6 +1458,9 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
    connection's name opens its settings card). The underline marks the link.
    @spec openspec/changes/settings-table-link-ink/specs/settings-board-look/spec.md */
 .cn-look-board .settings-section .cn-data-table a.cn-cell-renderer__link:not(.cn-look-nextcloud *) {
+	/* thematiq colours every link with `!important` from these two tokens. */
+	--nldesign-component-link-color: var(--color-main-text);
+	--nldesign-color-on-surface: var(--color-main-text);
 	color: var(--color-main-text);
 	text-decoration: underline;
 }
@@ -1542,7 +1545,13 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 .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;
+	/* 4px under the title and 14px above the content (PtBeheerinstellingen);
+	   the shell's `descGap` sets another gap, the content 10px further, as
+	   the boards drawn from NcBeheerInstellingen space them (6 and 16:
+	   DqBeheerinstellingen, LrBeheerinstellingen). The card's gap is 14px.
+	   @spec openspec/changes/board-settings-desc-spacing/specs/settings-board-look/spec.md */
+	margin-top: calc(var(--cn-board-settings-desc-gap, 4px) - 14px);
+	margin-bottom: calc(var(--cn-board-settings-desc-gap, 4px) - 4px);
 }
 
 .cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > .settings-section > .notecard,
@@ -2122,6 +2131,15 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	padding: 20px var(--cn-board-dashboard-card-inset) calc(12px - var(--cn-board-first-line-leading, 0.15em));
 }
 
+/* Over a list that rules above its first row (record list ruleAbove, task
+   list, decision list) the rule stands 6px under the title and the row's own
+   12px follows it: the boards' card is title, 6px, rule, row (DqMijnTeam
+   "Vastgelopen zaken", DqMijnWerk "Zaken die u volgt").
+   @spec openspec/changes/board-card-title-above-ruled-list/specs/board-card-title-above-ruled-list/spec.md#requirement-a-ruled-list-starts-6px-under-the-card-title */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard):not(.cn-widget-wrapper--borderless):has(> .cn-widget-wrapper__content .cn-record-list--rule-above, > .cn-widget-wrapper__content .cn-tasks-widget__list, > .cn-widget-wrapper__content .cn-decision-list__rows) .cn-widget-wrapper__header {
+	padding-bottom: 6px;
+}
+
 /* ---- Macros rows (CnMacrosWidget) ---------------------------------------- */
 /* A macro reads as the boards draw a card's list row: the name at weight 500
    over its 13px line, both at the font's normal line height, 56px a row
@@ -2222,6 +2240,23 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	line-height: normal;
 }
 
+/* A stacked audit row (DqTaak "Historie", `content.layout: "stacked"`): 12px
+   above and below, the action 15px weight 600, the moment and who under it
+   13px muted, 2px apart.
+   @spec openspec/changes/audit-card-stacked-rows/specs/audit-trail/spec.md#requirement-an-audit-row-can-put-its-moment-under-the-action */
+.cn-look-board .cn-audit-card__row--stacked:not(.cn-look-nextcloud *) {
+	padding: 12px 0;
+}
+
+.cn-look-board .cn-audit-card__row--stacked .cn-audit-card__action:not(.cn-look-nextcloud *) {
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-audit-card__row--stacked .cn-audit-card__when:not(.cn-look-nextcloud *) {
+	color: var(--color-text-maxcontrast);
+}
+
 /* ---- Managed timeline rows (DqZaakHistorie "Historie van de zaak") ------ */
 /* The board draws a timeline entry as a rail row: a 34px circle on a 2px
    line, the message first at 15px weight 600, the kind, author and moment
@@ -3115,6 +3150,23 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	background: var(--cn-board-sunken-ground);
 }
 
+/* An option's two lines at line height 1.2 and its icon at the top of the
+   row, as DqVolgendeStap draws them (rows 60 high, not 70). */
+.cn-look-board .cn-choice-cards .cn-choice-cards__row-title:not(.cn-look-nextcloud *),
+.cn-look-board .cn-choice-cards .cn-choice-cards__row-description:not(.cn-look-nextcloud *) {
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-choice-cards .cn-choice-cards__row-icon:not(.cn-look-nextcloud *) {
+	align-self: flex-start;
+}
+
+/* The chosen option's fields start under its text: radio 18, icon 20 and
+   two 12px gaps past the row's 14px inset. */
+.cn-look-board .cn-choice-cards .cn-choice-cards__cell--with-details:has(.cn-choice-cards__row-icon) .cn-choice-cards__details:not(.cn-look-nextcloud *) {
+	padding-inline-start: 76px;
+}
+
 /* A chosen option stays white under its primary edge, as every Dq dialog board
    draws it (design-system #371); the Nextcloud look keeps the tint.
    @spec openspec/changes/board-choice-row-chosen-white/specs/board-choice-row-chosen-white/spec.md#requirement-a-chosen-board-option-is-white */
@@ -3196,3 +3248,40 @@ html :where(.cn-look-board) :is(h2, h3, h5, h6):where(.cn-inner-heading) {
 .cn-look-board .cn-map-widget .leaflet-bar a.cn-map-widget__control:not(.cn-look-nextcloud *):focus-visible {
 	background: var(--color-background-hover);
 }
+
+/* The manage timeline's lines as DqZaakHistorie draws them: the subtitle and
+   the event count 14px muted (over a theme's paragraph tokens, which set a
+   paragraph 15px ink), the count line under a hairline, and the note form
+   card 12px under its heading with each label 6px over its field. */
+.cn-look-board .cn-timeline-manage__subtitle:not(.cn-look-nextcloud *),
+.cn-look-board .cn-timeline-manage__count:not(.cn-look-nextcloud *) {
+	--nldesign-component-paragraph-font-size: 14px;
+	--nldesign-component-paragraph-line-height: 1.2;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	line-height: 1.2;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .cn-timeline-manage__footer:not(.cn-look-nextcloud *) {
+	padding-top: 12px;
+	border-top: 1px solid var(--cn-board-hairline);
+}
+
+.cn-look-board .cn-timeline-manage--composer-only .cn-timeline-manage__header:not(.cn-look-nextcloud *) {
+	margin-block-end: 12px;
+}
+
+.cn-look-board .cn-timeline-manage__composer:not(.cn-look-nextcloud *) {
+	gap: 6px;
+}
+
+.cn-look-board .cn-timeline-manage__draft-label:not(.cn-look-nextcloud *) {
+	margin-block-start: 6px;
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-timeline-manage__draft-label:first-child:not(.cn-look-nextcloud *) {
+	margin-block-start: 0;
+}

package/src/integrations/builtin/contacts/CnContactsTab.vue

@@ -87,7 +87,7 @@
 				class="cn-contacts-tab__group">
 				<h3 class="cn-contacts-tab__group-title">
 					{{ group.label }}
-					<span class="cn-contacts-tab__group-count">{{ group.items.length }}</span>
+					<span v-if="!isBoard" class="cn-contacts-tab__group-count">{{ group.items.length }}</span>
 				</h3>
 				<ul class="cn-contacts-tab__list">
 					<li
@@ -97,7 +97,7 @@
 						@click="openReverseLookup(contact)">
 						<div class="cn-contacts-tab__avatar">
 							<NcAvatar
-								:size="40"
+								:size="isBoard ? 32 : 40"
 								:displayName="contact.displayName || unknownLabel"
 								:user="avatarSeed(contact)"
 								:url="contact.avatarUrl || undefined"
@@ -112,7 +112,7 @@
 									{{ contact.displayName || unknownLabel }}
 								</span>
 								<CnStatusBadge
-									v-if="contact.role"
+									v-if="contact.role && !isBoard"
 									:label="roleLabel(contact)"
 									:variant="roleVariant(contact)"
 									size="small" />
@@ -123,30 +123,54 @@
 									size="small"
 									data-testid="cn-contacts-tab-inactive" />
 							</div>
-							<div v-if="contact.email" class="cn-contacts-tab__sub">
-								<Email :size="14" class="cn-contacts-tab__sub-icon" />
-								<span class="cn-contacts-tab__sub-text">{{ contact.email }}</span>
-							</div>
-							<div v-if="contact.phone" class="cn-contacts-tab__sub">
-								<Phone :size="14" class="cn-contacts-tab__sub-icon" />
-								<span class="cn-contacts-tab__sub-text">{{ contact.phone }}</span>
-							</div>
-							<div v-if="contact.org" class="cn-contacts-tab__sub">
-								<OfficeBuildingOutline :size="14" class="cn-contacts-tab__sub-icon" />
-								<span class="cn-contacts-tab__sub-text">{{ contact.org }}</span>
-							</div>
-							<div
-								v-if="periodOf(contact)"
-								class="cn-contacts-tab__sub"
-								data-testid="cn-contacts-tab-period">
-								<CalendarRange :size="14" class="cn-contacts-tab__sub-icon" />
-								<span class="cn-contacts-tab__sub-text">{{ periodOf(contact) }}</span>
-							</div>
-							<div v-if="contact.note" class="cn-contacts-tab__sub">
-								<span class="cn-contacts-tab__sub-text">{{ contact.note }}</span>
-							</div>
+							<!-- The board look sets the details on one line (DqZaakBetrokkenen). -->
+							<span v-if="isBoard && boardMetaOf(contact)"
+								class="cn-contacts-tab__meta"
+								data-testid="cn-contacts-tab-meta">{{ boardMetaOf(contact) }}</span>
+							<template v-if="!isBoard">
+								<div v-if="contact.email" class="cn-contacts-tab__sub">
+									<Email :size="14" class="cn-contacts-tab__sub-icon" />
+									<span class="cn-contacts-tab__sub-text">{{ contact.email }}</span>
+								</div>
+								<div v-if="contact.phone" class="cn-contacts-tab__sub">
+									<Phone :size="14" class="cn-contacts-tab__sub-icon" />
+									<span class="cn-contacts-tab__sub-text">{{ contact.phone }}</span>
+								</div>
+								<div v-if="contact.org" class="cn-contacts-tab__sub">
+									<OfficeBuildingOutline :size="14" class="cn-contacts-tab__sub-icon" />
+									<span class="cn-contacts-tab__sub-text">{{ contact.org }}</span>
+								</div>
+								<div
+									v-if="periodOf(contact)"
+									class="cn-contacts-tab__sub"
+									data-testid="cn-contacts-tab-period">
+									<CalendarRange :size="14" class="cn-contacts-tab__sub-icon" />
+									<span class="cn-contacts-tab__sub-text">{{ periodOf(contact) }}</span>
+								</div>
+								<div v-if="contact.note" class="cn-contacts-tab__sub">
+									<span class="cn-contacts-tab__sub-text">{{ contact.note }}</span>
+								</div>
+							</template>
 						</div>
+						<template v-if="isBoard">
+							<span v-if="boardPeriodOf(contact)"
+								class="cn-contacts-tab__period"
+								data-testid="cn-contacts-tab-board-period">{{ boardPeriodOf(contact) }}</span>
+							<NcActions class="cn-contacts-tab__menu"
+								variant="secondary"
+								:aria-label="moreActionsLabel(contact)"
+								data-testid="cn-contacts-tab-menu"
+								@click.stop>
+								<NcActionButton :closeAfterClick="true" @click="unlink(contact)">
+									<template #icon>
+										<Close :size="20" />
+									</template>
+									{{ unlinkLabel }}
+								</NcActionButton>
+							</NcActions>
+						</template>
 						<button
+							v-else
 							type="button"
 							class="cn-contacts-tab__unlink"
 							:aria-label="unlinkLabel"
@@ -178,7 +202,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { NcAvatar, NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcActions, NcAvatar, NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import AccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'
 import AccountPlus from 'vue-material-design-icons/AccountPlus.vue'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
@@ -193,6 +217,7 @@ import CnContactPicker from '../../../components/CnContactPicker/CnContactPicker
 import CnStatusBadge from '../../../components/CnStatusBadge/CnStatusBadge.vue'
 import CnWidgetHeaderActionButtons from '../../../components/CnWidgetWrapper/CnWidgetHeaderActionButtons.vue'
 import { normalizeLook } from '../../../composables/useLook.js'
+import { formatBoardDate } from '../../../utils/boardDate.js'
 import { buildHeaders, prefixUrl } from '../../../utils/index.js'
 import { WIDGET_BODY_ACTIONS } from '../../../utils/widgetHeaderActions.js'
 
@@ -223,6 +248,8 @@ export default {
 	name: 'CnContactsTab',
 
 	components: {
+		NcActionButton,
+		NcActions,
 		NcAvatar,
 		NcButton,
 		NcEmptyContent,
@@ -313,6 +340,11 @@ export default {
 	},
 
 	computed: {
+		/** @return {boolean} The board look draws the rows as DqZaakBetrokkenen does. */
+		isBoard() {
+			return normalizeLook(this.cnLook) === 'board'
+		},
+
 		/**
 		 * The two header buttons in the order and weight of the look: the
 		 * board look draws Link contact then New contact, both outlined; the
@@ -605,6 +637,49 @@ export default {
 		 *
 		 * @return {string} The window.
 		 */
+		/**
+		 * A person's details on one line for the board look: e-mail, phone,
+		 * organisation and note, separated by middots.
+		 *
+		 * @param {object} contact The contact link.
+		 * @return {string}
+		 */
+		boardMetaOf(contact) {
+			return [contact?.email, contact?.phone, contact?.org, contact?.note].filter((part) => typeof part === 'string' && part !== '').join(' · ')
+		},
+
+		/**
+		 * The validity window in the board's short dates: "Vanaf 3 okt",
+		 * "Tot 31 okt" or "3 okt – 31 okt".
+		 *
+		 * @param {object} contact The contact link.
+		 * @return {string}
+		 */
+		boardPeriodOf(contact) {
+			const from = formatBoardDate(contact?.validFrom || '')
+			const until = formatBoardDate(contact?.validUntil || '')
+			if (from === '' && until === '') {
+				return ''
+			}
+			if (until === '') {
+				return t('nextcloud-vue', 'From {date}', { date: from })
+			}
+			if (from === '') {
+				return t('nextcloud-vue', 'Until {date}', { date: until })
+			}
+			return `${from} – ${until}`
+		},
+
+		/**
+		 * The label of a person's actions menu.
+		 *
+		 * @param {object} contact The contact link.
+		 * @return {string}
+		 */
+		moreActionsLabel(contact) {
+			return t('nextcloud-vue', 'More actions for {name}', { name: contact?.displayName || this.unknownLabel })
+		},
+
 		periodOf(contact) {
 			const from = contact?.validFrom || ''
 			const until = contact?.validUntil || ''

package/src/integrations/builtin/contacts/__tests__/CnContactsTabBoardRows.spec.js

@@ -0,0 +1,67 @@
+/**
+ * SPDX-License-Identifier: EUPL-1.2
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ *
+ * CnContactsTab in the board look draws a person as DqZaakBetrokkenen
+ * "Partijen" does: no role badge under a group that already names the role
+ * (r26a showed a role id as a badge), no count beside the group heading, the
+ * contact details on one line, the period at the right in the board's short
+ * date ("Vanaf 3 okt"), and the remove action in a "…" menu.
+ *
+ * @spec openspec/changes/board-contacts-rows/specs/contacts/spec.md
+ */
+
+const { flushPromises, mount } = require('@vue/test-utils')
+const CnContactsTab = require('../CnContactsTab.vue').default
+const { formatBoardDate } = require('../../../../utils/boardDate.js')
+
+const ROWS = [{
+	id: 1,
+	contactUid: 'c1',
+	displayName: 'Sanne de Vries',
+	role: '3c0f5a00-0000-4000-a000-0000000c0001',
+	email: 'sanne@example.nl',
+	note: 'ingelogd met DigiD',
+	validFrom: '2026-10-03',
+}]
+
+function mountTab(look) {
+	return mount(CnContactsTab, {
+		propsData: { objectId: 'o1', register: 'r1', schema: 's1' },
+		global: { provide: { cnLook: look } },
+	})
+}
+
+describe('CnContactsTab board rows', () => {
+	beforeEach(() => {
+		global.fetch = jest.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve({ results: ROWS, total: 1 }) })
+	})
+
+	afterEach(() => {
+		delete global.fetch
+	})
+
+	it('draws the board row in the board look', async () => {
+		const w = mountTab('board')
+		await flushPromises()
+		const item = w.find('.cn-contacts-tab__item')
+		expect(item.find('.cn-contacts-tab__group-count').exists()).toBe(false)
+		expect(w.find('.cn-contacts-tab__group-count').exists()).toBe(false)
+		expect(item.text()).not.toContain('3c0f5a00')
+		expect(item.find('[data-testid="cn-contacts-tab-meta"]').text()).toBe('sanne@example.nl · ingelogd met DigiD')
+		expect(item.find('[data-testid="cn-contacts-tab-board-period"]').text()).toBe(`From ${formatBoardDate('2026-10-03')}`)
+		expect(item.find('.cn-contacts-tab__unlink').exists()).toBe(false)
+		expect(item.find('[data-testid="cn-contacts-tab-menu"]').exists()).toBe(true)
+		w.unmount()
+	})
+
+	it('keeps the Nextcloud row in the Nextcloud look', async () => {
+		const w = mountTab('nextcloud')
+		await flushPromises()
+		const item = w.find('.cn-contacts-tab__item')
+		expect(w.find('.cn-contacts-tab__group-count').exists()).toBe(true)
+		expect(item.find('.cn-contacts-tab__unlink').exists()).toBe(true)
+		expect(item.find('[data-testid="cn-contacts-tab-meta"]').exists()).toBe(false)
+		w.unmount()
+	})
+})