@conduction/nextcloud-vue 2.142.0 → 2.144.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -8517,7 +8517,9 @@ export default {
 			return [
 				...this.searchTermChips,
 				...this.quickFilterActiveChips,
-				...this.filterChipsOf(this.effectiveActiveFilters, (key, value) => this.isFixedFilter(key, value) || ownToView(key, value)),
+				// The folder pane's own filter is not a chip: the selected folder
+				// shows in the pane and as the heading above the list (DqAfdelingen).
+				...this.filterChipsOf(this.effectiveActiveFilters, (key, value) => this.isFixedFilter(key, value) || ownToView(key, value) || this.isFolderFilter(key)),
 			]
 		},
 
@@ -9703,6 +9705,18 @@ export default {
 		 * @return {boolean}
 		 * @spec openspec/changes/index-scope-presentation/specs/index-page/spec.md#requirement-the-query-that-chose-a-preset-is-not-a-removable-filter
 		 */
+		/**
+		 * Whether a filter key is the folder pane's (`folderSidebar.filterField`).
+		 *
+		 * @param {string} key The filter key.
+		 * @return {boolean}
+		 * @spec openspec/changes/board-folder-scope-outside-card/specs/index-page/spec.md#requirement-the-selected-folder-heads-the-list-from-outside-its-card
+		 */
+		isFolderFilter(key) {
+			const field = this.folderSidebar && this.folderSidebar.filterField
+			return typeof field === 'string' && field !== '' && key === field
+		},
+
 		isFixedFilter(key, value) {
 			const fixed = this.fixedFilters
 			if (!fixed || !Object.hasOwn(fixed, key)) {
@@ -9979,7 +9993,7 @@ export default {
 			]
 			let counts
 			try {
-				counts = await fetchFilterCounts({ register: this.register, schema, entries, baseFilter: base, ctx })
+				counts = await fetchFilterCounts({ register: this.register, schema, entries, baseFilter: base, ctx, via: 'list' })
 			} catch {
 				counts = {}
 			}
@@ -10036,6 +10050,8 @@ export default {
 				})),
 				baseFilter: resolveFilterMap(this.filter, params, ctx),
 				ctx,
+				// The chips count what the list shows: the list's own request.
+				via: 'list',
 			})
 			if (requestKey !== this.countRequestKey) {
 				return

package/src/components/CnNotesCard/CnNotesCard.vue

@@ -96,6 +96,7 @@
 						:key="row.note.id"
 						class="cn-notes-card__note"
 						:class="{ 'cn-notes-card__note--reply': row.isReply }">
+						<span class="cn-notes-card__initials" aria-hidden="true">{{ initialsOf(getNoteAuthorName(row.note)) }}</span>
 						<div class="cn-notes-card__note-header">
 							<CnUserActionMenu
 								v-if="!isCurrentUser(row.note)"
@@ -175,6 +176,7 @@ import CnUserActionMenu from '../CnUserActionMenu/CnUserActionMenu.vue'
 import CnVisibilityChip from '../CnVisibilityChip/CnVisibilityChip.vue'
 import { useFileComments } from '../../composables/useFileComments.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
+import { initialsOf } from '../../utils/initials.js'
 import { leafSourceUrl } from '../../utils/leafSourceUrl.js'
 import { extractMentionedGroupIds, extractMentionedIds } from '../../utils/mentions.js'
 import { quoteFor, supportsReplies, threadNotes, threadRootId } from '../../utils/noteThreads.js'
@@ -635,6 +637,8 @@ export default {
 			return note.actorId || note.author || ''
 		},
 
+		initialsOf,
+
 		getNoteAuthorName(note) {
 			return note.actorDisplayName || note.author || 'Unknown'
 		},
@@ -870,6 +874,10 @@ export default {
 	border-bottom: none;
 }
 
+.cn-notes-card__initials {
+	display: none;
+}
+
 .cn-notes-card__note-header {
 	display: flex;
 	justify-content: space-between;

package/src/components/CnObjectPartiesWidget/CnObjectPartiesWidget.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="cn-object-parties" data-testid="cn-object-parties">
+	<div class="cn-object-parties" :class="{ 'cn-object-parties--board': isBoard }" data-testid="cn-object-parties">
 		<div v-if="canAdd" class="cn-object-parties__manage">
 			<NcButton data-testid="cn-object-parties-add" @click="adding = true">
 				<template #icon>
@@ -112,51 +112,89 @@
 						class="cn-object-parties__party"
 						:data-party="party.partyUuid || party.contactUid"
 						data-testid="cn-object-parties-party">
-						<span class="cn-object-parties__name">{{ nameOf(party) }}</span>
-						<span
-							v-if="primary && party.partyUuid === primary"
-							class="cn-status-badge cn-status-badge--primary"
-							data-testid="cn-object-parties-primary">{{ label('primary') }}</span>
-						<span v-if="kindOf(party)" class="cn-object-parties__muted">{{ kindOf(party) }}</span>
-						<span
-							v-if="notAccepted(party)"
-							class="cn-status-badge cn-status-badge--warning"
-							data-testid="cn-object-parties-not-accepted">{{ label('notAccepted') }}</span>
-						<span
-							v-for="(line, index) in extraLinesOf(party)"
-							:key="`line-${index}`"
-							class="cn-object-parties__muted"
-							data-testid="cn-object-parties-extra-line">{{ line }}</span>
-						<span v-if="party.email" class="cn-object-parties__muted">{{ party.email }}</span>
-						<span
-							v-if="representedBy(party)"
-							class="cn-object-parties__muted"
-							data-testid="cn-object-parties-represented">{{ label('representedBy') }}: {{ representedBy(party) }}</span>
-						<span
-							v-if="correspondenceOf(party)"
-							class="cn-object-parties__muted"
-							:data-party-documents="party.partyUuid || party.contactUid"
-							data-testid="cn-object-parties-documents">{{ correspondenceOf(party) }}</span>
-						<span
-							v-for="indicator in indicatorsFor(party)"
-							:key="`${party.partyUuid}-${indicator.key}`"
-							class="cn-status-badge cn-status-badge--default"
-							:class="`cn-object-parties__indicator--${indicator.severity}`"
-							:data-effect="indicator.effect"
-							:title="indicator.verdict"
-							data-testid="cn-object-parties-indicator">{{ indicator.label }} · {{ indicator.verdict }}</span>
-						<NcButton
-							v-if="canRemove && party.partyUuid"
-							class="cn-object-parties__remove"
-							variant="tertiary"
-							:aria-label="removeLabel(party, group)"
-							:title="removeLabel(party, group)"
-							data-testid="cn-object-parties-remove"
-							@click="removing = { party, group }">
-							<template #icon>
-								<TrashCanOutline :size="20" />
-							</template>
-						</NcButton>
+						<!-- The board look draws a party as one ruled row (DqZaakBetrokkenen
+						     "Rollen"): an initials tile, the name over one meta line that
+						     names the role, the pills at the end. -->
+						<template v-if="isBoard">
+							<span class="cn-object-parties__tile" aria-hidden="true">{{ initialsOf(nameOf(party)) }}</span>
+							<span class="cn-object-parties__text">
+								<span class="cn-object-parties__name">{{ nameOf(party) }}</span>
+								<span class="cn-object-parties__meta" data-testid="cn-object-parties-meta">{{ boardMetaOf(party, group) }}</span>
+							</span>
+							<span class="cn-object-parties__end">
+								<span
+									v-if="notAccepted(party)"
+									class="cn-status-badge cn-status-badge--warning"
+									data-testid="cn-object-parties-not-accepted">{{ label('notAccepted') }}</span>
+								<span
+									v-for="indicator in indicatorsFor(party)"
+									:key="`${party.partyUuid}-${indicator.key}`"
+									class="cn-status-badge cn-status-badge--default"
+									:class="`cn-object-parties__indicator--${indicator.severity}`"
+									:data-effect="indicator.effect"
+									:title="indicator.verdict"
+									data-testid="cn-object-parties-indicator">{{ indicator.label }}</span>
+								<NcButton
+									v-if="canRemove && party.partyUuid"
+									class="cn-object-parties__remove"
+									variant="tertiary"
+									:aria-label="removeLabel(party, group)"
+									:title="removeLabel(party, group)"
+									data-testid="cn-object-parties-remove"
+									@click="removing = { party, group }">
+									<template #icon>
+										<TrashCanOutline :size="20" />
+									</template>
+								</NcButton>
+							</span>
+						</template>
+						<template v-else>
+							<span class="cn-object-parties__name">{{ nameOf(party) }}</span>
+							<span
+								v-if="primary && party.partyUuid === primary"
+								class="cn-status-badge cn-status-badge--primary"
+								data-testid="cn-object-parties-primary">{{ label('primary') }}</span>
+							<span v-if="kindOf(party)" class="cn-object-parties__muted">{{ kindOf(party) }}</span>
+							<span
+								v-if="notAccepted(party)"
+								class="cn-status-badge cn-status-badge--warning"
+								data-testid="cn-object-parties-not-accepted">{{ label('notAccepted') }}</span>
+							<span
+								v-for="(line, index) in extraLinesOf(party)"
+								:key="`line-${index}`"
+								class="cn-object-parties__muted"
+								data-testid="cn-object-parties-extra-line">{{ line }}</span>
+							<span v-if="party.email" class="cn-object-parties__muted">{{ party.email }}</span>
+							<span
+								v-if="representedBy(party)"
+								class="cn-object-parties__muted"
+								data-testid="cn-object-parties-represented">{{ label('representedBy') }}: {{ representedBy(party) }}</span>
+							<span
+								v-if="correspondenceOf(party)"
+								class="cn-object-parties__muted"
+								:data-party-documents="party.partyUuid || party.contactUid"
+								data-testid="cn-object-parties-documents">{{ correspondenceOf(party) }}</span>
+							<span
+								v-for="indicator in indicatorsFor(party)"
+								:key="`${party.partyUuid}-${indicator.key}`"
+								class="cn-status-badge cn-status-badge--default"
+								:class="`cn-object-parties__indicator--${indicator.severity}`"
+								:data-effect="indicator.effect"
+								:title="indicator.verdict"
+								data-testid="cn-object-parties-indicator">{{ indicator.label }} · {{ indicator.verdict }}</span>
+							<NcButton
+								v-if="canRemove && party.partyUuid"
+								class="cn-object-parties__remove"
+								variant="tertiary"
+								:aria-label="removeLabel(party, group)"
+								:title="removeLabel(party, group)"
+								data-testid="cn-object-parties-remove"
+								@click="removing = { party, group }">
+								<template #icon>
+									<TrashCanOutline :size="20" />
+								</template>
+							</NcButton>
+						</template>
 					</li>
 				</ul>
 			</section>
@@ -200,6 +238,7 @@ import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
 import CnPartyAddDialog from '../../dialogs/CnPartyAddDialog.vue'
 import { interpolateUrlTokens } from '../../composables/useEndpointSource.js'
+import { normalizeLook } from '../../composables/useLook.js'
 import innerHeading from '../../mixins/innerHeading.js'
 import { conditionalLine } from '../../utils/conditionalLine.js'
 import { initialsOf } from '../../utils/initials.js'
@@ -287,6 +326,7 @@ export default {
 
 	inject: {
 		cnTranslate: { default: () => (key) => key },
+		cnLook: { default: 'nextcloud' },
 	},
 
 	props: {
@@ -347,6 +387,11 @@ export default {
 	},
 
 	computed: {
+		/** @return {boolean} The board look draws one ruled row per party. */
+		isBoard() {
+			return normalizeLook(this.cnLook) === 'board'
+		},
+
 		/** @return {Array<object>} The role groups, primary first. */
 		groups() {
 			return rolesInOrder(this.listing, this.translatedMap(this.content?.roleLabels))
@@ -916,6 +961,29 @@ export default {
 		 * @param {object} party The listing row.
 		 * @return {Array<object>}
 		 */
+		/**
+		 * The board row's meta line: the primary mark, the role, the kind,
+		 * whom the party represents, its extra lines, e-mail and documents,
+		 * separated by middots.
+		 *
+		 * @param {object} party The party.
+		 * @param {object} group Its role group.
+		 * @return {string}
+		 */
+		boardMetaOf(party, group) {
+			const parts = []
+			if (this.primary && party.partyUuid === this.primary) {
+				parts.push(this.label('primary'))
+			}
+			parts.push(group.label, this.kindOf(party))
+			const represented = this.representedBy(party)
+			if (represented) {
+				parts.push(`${this.label('representedBy')}: ${represented}`)
+			}
+			parts.push(...this.extraLinesOf(party), party.email, this.correspondenceOf(party))
+			return parts.filter((part) => typeof part === 'string' && part !== '').join(' · ')
+		},
+
 		indicatorsFor(party) {
 			const record = this.partyRecords[party.partyUuid]
 			if (!record) {

package/src/components/CnPageHeader/CnHeaderTrail.vue

@@ -99,7 +99,8 @@ export default {
 
 		/**
 		 * The crumbs for CnBreadcrumbs: each declared crumb as a link, then the
-		 * current page. Empty without a declared crumb.
+		 * current page, once (a last crumb that names the page is dropped).
+		 * Empty without a declared crumb.
 		 *
 		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
 		 * @return {Array<object>}
@@ -121,6 +122,10 @@ export default {
 				return entry
 			})
 			if (this.current) {
+				// A last crumb naming the page itself is the current one, drawn once.
+				if (out.length > 0 && out[out.length - 1].label === this.current) {
+					out.pop()
+				}
 				out.push({ label: this.current })
 			}
 			return out

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -194,6 +194,7 @@
 			<ul
 				v-if="group.items.length > 0"
 				class="cn-record-list__list"
+				:class="{ 'cn-record-list__list--avatar-small': avatarSmall }"
 				:aria-labelledby="group.label ? group.headingId : null"
 				:data-testid="isGrouped ? 'cn-record-list-group' : null">
 				<li
@@ -635,7 +636,7 @@ function unwrap(value) {
  * `rowRoute`, `pageControls`), or `endpointSource` (an app endpoint whose
  * payload, after `responsePath`, is the array of rows, as on the object table), or `objectRows`
  * (`{ path, where?, valuePath? }`: rows the page record holds, such as one answer of a case); `avatar` puts a circle with the initials of a name
- * template before the title; what differs is the drawing: `presentation` is `rows`, `feed`
+ * template before the title (`{ text, size: 32 }` draws the 32px circle 12px from the title, as DqZaakBesluiten); what differs is the drawing: `presentation` is `rows`, `feed`
  * or `inline`, and each line is a template (`"{identifier} · {caseTypeName}"`,
  * `"Termijn {deadline|date}"`). `cards` draws a framed card per row in a
  * grid, with `trailing` as the large figure (board ShBank's accounts).
@@ -831,6 +832,17 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the avatar is the 32px circle (`avatar.size: 32`).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/record-list-avatar-size/specs/record-list-avatar/spec.md#requirement-a-record-list-avatar-can-be-the-small-circle
+		 */
+		avatarSmall() {
+			const avatar = this.content?.avatar
+			return Boolean(avatar && typeof avatar === 'object' && Number(avatar.size) === 32)
+		},
+
 		/** @return {boolean} Whether a row's pill comes before its title (`pillAt: "start"`). */
 		pillFirst() {
 			return this.content?.pillAt === 'start'
@@ -3068,6 +3080,14 @@ export default {
 	white-space: nowrap;
 }
 
+/* `avatar.size: 32`: the smaller circle, 12px from the title where the row
+   keeps 16px between its other parts (DqZaakBesluiten Adviezen). */
+.cn-record-list__list--avatar-small .cn-record-list__avatar {
+	width: 32px;
+	height: 32px;
+	margin-inline-end: -4px;
+}
+
 .cn-record-list__avatar {
 	align-items: center;
 	background: var(--color-background-hover);

package/src/components/CnRetentionWidget/CnRetentionWidget.vue

@@ -85,6 +85,7 @@
 				</component>
 				<ul class="cn-retention__rows">
 					<li v-for="hold in holds" :key="hold.id" class="cn-retention__row">
+						<span class="cn-retention__mark cn-retention__mark--hold" aria-hidden="true">LH</span>
 						<span class="cn-retention__row-text">
 							<span class="cn-retention__row-title">{{ hold.reason || t('nextcloud-vue', 'Legal hold') }}</span>
 							<span class="cn-retention__muted">{{ t('nextcloud-vue', 'Placed on {date} by {by}', { date: hold.placedDate, by: hold.placedBy }) }}</span>
@@ -92,6 +93,7 @@
 						<CnStatusBadge :label="t('nextcloud-vue', 'Active')" variant="warning" />
 					</li>
 					<li v-if="holds.length === 0" class="cn-retention__row">
+						<span class="cn-retention__mark cn-retention__mark--hold" aria-hidden="true">LH</span>
 						<span class="cn-retention__row-text">
 							<span class="cn-retention__row-title">{{ t('nextcloud-vue', 'No legal hold') }}</span>
 							<span class="cn-retention__muted">{{ t('nextcloud-vue', 'If an objection or appeal runs, destruction is suspended') }}</span>
@@ -107,6 +109,7 @@
 				</component>
 				<ul class="cn-retention__rows">
 					<li class="cn-retention__row">
+						<span class="cn-retention__mark" aria-hidden="true">ED</span>
 						<span class="cn-retention__row-text">
 							<span class="cn-retention__row-title">{{ transfers ? t('nextcloud-vue', 'Goes to the e-Depot') : t('nextcloud-vue', 'Not applicable') }}</span>
 							<span class="cn-retention__muted">{{ transfers ? t('nextcloud-vue', 'After the retention period the record is transferred') : t('nextcloud-vue', 'Only records appraised to keep go to the e-Depot') }}</span>
@@ -643,17 +646,39 @@ export default {
 	align-items: center;
 	justify-content: space-between;
 	gap: 12px;
-	padding: 10px 0;
+	padding: 12px 0;
 	border-top: 1px solid var(--color-border);
 }
 
 .cn-retention__row-text {
 	display: flex;
+	flex: 1 1 auto;
 	flex-direction: column;
 	gap: 2px;
 	min-width: 0;
 }
 
+/* A round mark before a hold or transfer row: LH (legal hold) on the error
+   tint, ED (e-Depot) on the chip ground (DqZaakArchivering). */
+.cn-retention__mark {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 16px;
+	background: var(--color-background-dark);
+	color: var(--color-text-maxcontrast);
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.cn-retention__mark--hold {
+	background: var(--color-error-light, #fcedec);
+	color: var(--color-error-text, #a30000);
+}
+
 .cn-retention__row-title {
 	font-weight: 600;
 }

package/src/components/CnSavedViewAlertWidget/CnSavedViewAlertWidget.vue

@@ -243,6 +243,7 @@ export default {
 }
 
 .cn-saved-view-alert__facts {
+	padding: 0;
 	display: grid;
 	grid-template-columns: max-content 1fr;
 	gap: 6px 16px;
@@ -280,6 +281,11 @@ export default {
 	font-weight: 600;
 }
 
+/* The switch sits flush with the card edge, as the board draws it. */
+.cn-saved-view-alert :deep(.checkbox-radio-switch__content) {
+	padding: 0;
+}
+
 .cn-saved-view-alert__switch-text {
 	display: flex;
 	flex-direction: column;