@conduction/nextcloud-vue 2.80.0 → 2.81.0

package/src/components/CnWorkspaceFilterWidget/CnWorkspaceFilterWidget.vue

@@ -6,7 +6,13 @@
 <template>
 	<div
 		class="cn-workspace-filter-widget"
-		:class="{ 'cn-workspace-filter-widget--start': isStart }"
+		:class="{
+			'cn-workspace-filter-widget--start': isStart,
+			'cn-workspace-filter-widget--chips': style === 'chips',
+			'cn-workspace-filter-widget--bar': isBar,
+			'cn-workspace-filter-widget--inline': content.inline === true,
+			'cn-workspace-filter-widget--end': content.align === 'end',
+		}"
 		data-testid="cn-workspace-filter-widget">
 		<!-- The start card (`layout: "start"`): a title and one line of
 		     guidance beside the control, as the "Contact starten" card. -->
@@ -19,14 +25,24 @@
 			</p>
 		</div>
 
-		<p v-if="label" class="cn-workspace-filter-widget__label">
+		<!-- A bar (`layout: "bar"`): its `controls` side by side in one row,
+		     each a workspace filter of its own (chips, a switch, a select). -->
+		<template v-if="isBar">
+			<CnWorkspaceFilterWidget
+				v-for="(control, index) in barControls"
+				:key="index"
+				:content="control"
+				@change="$emit('change', $event)" />
+		</template>
+
+		<p v-if="!isBar && label && style !== 'chips' && style !== 'toggle'" class="cn-workspace-filter-widget__label">
 			{{ label }}
 		</p>
 
 		<!-- An object picker (`objectSource`): searches OpenRegister on the
 		     server, so it reaches every object, not a fetched page. -->
 		<CnResourceSelect
-			v-if="objectSource"
+			v-if="!isBar && objectSource"
 			class="cn-workspace-filter-widget__control"
 			:register="objectSource.register"
 			:schema="objectSource.schema"
@@ -44,19 +60,45 @@
 			{{ loadingLabel }}
 		</div>
 
+		<!-- Chips style (screens-page-lenses): one compact segmented group,
+		     a count after each label, arrow keys move the choice. -->
+		<CnSegmentedControl
+			v-else-if="style === 'chips'"
+			class="cn-workspace-filter-widget__chips"
+			size="compact"
+			:options="chipOptions"
+			:modelValue="selected === undefined || selected === null ? null : String(selected)"
+			:ariaLabel="label || writeKey"
+			data-testid="cn-workspace-filter-chips"
+			@update:modelValue="applySelection" />
+
+		<!-- Toggle style (screens-page-controls): a switch that writes
+		     `onValue` / `offValue` (true / false) to the key. -->
+		<NcCheckboxRadioSwitch
+			v-else-if="style === 'toggle'"
+			class="cn-workspace-filter-widget__toggle"
+			type="switch"
+			:modelValue="toggleOn"
+			data-testid="cn-workspace-filter-toggle"
+			@update:modelValue="onToggle">
+			{{ tr(label) }}
+		</NcCheckboxRadioSwitch>
+
 		<!-- Select style -->
 		<NcSelect
 			v-else-if="style === 'select'"
 			:modelValue="selectedOption"
 			:options="displayOptions"
 			:clearable="false"
-			:inputLabel="label || writeKey"
+			:inputLabel="content.inline ? '' : (label || writeKey)"
+			:labelOutside="content.inline === true"
+			:ariaLabelCombobox="label || writeKey"
 			label="label"
 			data-testid="cn-workspace-filter-select"
 			@update:modelValue="onSelect" />
 
 		<!-- Radio-list style (default) -->
-		<ul v-else
+		<ul v-else-if="!isBar"
 			class="cn-workspace-filter-widget__list"
 			role="radiogroup"
 			:aria-label="label || writeKey">
@@ -92,10 +134,13 @@
 </template>
 
 <script>
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
 import { NcCheckboxRadioSwitch, NcSelect } from '@nextcloud/vue'
 import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
+import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import { fetchEndpointSource } from '../../composables/useEndpointSource.js'
+import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 
 /**
@@ -126,7 +171,7 @@ import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
  * content: {
  *   label: 'Queue',
  *   writes: '@workspace.queue',
- *   style: 'radio',                 // 'radio' (default) | 'select'
+ *   style: 'radio',                 // 'radio' (default) | 'select' | 'chips'
  *   allLabel: 'All',
  *   showCounts: true,
  *   source: { register: 'pipelinq', schema: 'werkitem', groupBy: 'queue' },
@@ -136,7 +181,7 @@ import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 export default {
 	name: 'CnWorkspaceFilterWidget',
 
-	components: { CnResourceSelect, NcSelect, NcCheckboxRadioSwitch },
+	components: { CnResourceSelect, CnSegmentedControl, NcSelect, NcCheckboxRadioSwitch },
 
 	inject: {
 		/**
@@ -162,7 +207,19 @@ export default {
 		 * server and writes the picked object's id; without a selection and
 		 * without `allLabel` it selects the first object.
 		 *
-		 * @type {{label?: string, writes?: string, style?: string, allLabel?: string, showCounts?: boolean, options?: Array, source?: object, endpointSource?: object, objectSource?: object, default?: (string|number), layout?: string, title?: string, description?: string, link?: object}}
+		 * Chips (screens-page-lenses): `style: "chips"` draws the options as one
+		 * compact segmented group with a count after each label. An option's
+		 * `countFrom` (`{ register, schema, filter? }`, or a list of them that
+		 * are added up) counts that list; a static `count` is used otherwise.
+		 * `urlKey` keeps the choice in the address (`?<urlKey>=<value>`), and
+		 * the address wins over `default` on load.
+		 *
+		 * Page controls (screens-page-controls): `style: "toggle"` is a switch
+		 * that writes `onValue` / `offValue` (true / false); `layout: "bar"`
+		 * with `controls` draws several controls side by side in one row, and
+		 * `align: "end"` pushes a control to the right edge.
+		 *
+		 * @type {{label?: string, controls?: Array<object>, onValue?: unknown, offValue?: unknown, align?: string, urlKey?: string, writes?: string, style?: string, allLabel?: string, showCounts?: boolean, options?: Array, source?: object, endpointSource?: object, objectSource?: object, default?: (string|number), layout?: string, title?: string, description?: string, link?: object}}
 		 */
 		content: {
 			type: Object,
@@ -180,6 +237,8 @@ export default {
 			loading: false,
 			/** The currently-selected value (mirrors the workspace key). */
 			selected: undefined,
+			/** Counted totals of the options that ask (`countFrom`), by option position. */
+			optionCounts: {},
 		}
 	},
 
@@ -233,9 +292,73 @@ export default {
 			return src && typeof src === 'object' && src.register && src.schema ? src : null
 		},
 
-		/** Choice style: 'select' or 'radio' (default). */
+		/** Choice style: 'chips', 'select' or 'radio' (default). */
 		style() {
-			return this.content.style === 'select' ? 'select' : 'radio'
+			return ['select', 'chips', 'toggle'].includes(this.content.style) ? this.content.style : 'radio'
+		},
+
+		/**
+		 * The chips: each option with its label translated and its count,
+		 * the static one or the counted one.
+		 *
+		 * @return {Array<{value: string, label: string, count?: number}>}
+		 * @spec openspec/changes/screens-page-lenses/specs/page-lenses/spec.md#requirement-a-workspace-filter-can-draw-chips-with-counts
+		 */
+		chipOptions() {
+			return this.displayOptions.map((option, index) => {
+				const counted = this.optionCounts[index]
+				const count = counted !== undefined && counted !== null ? counted : option.count
+				const chip = { value: String(option.value), label: this.tr(option.label) }
+				if (this.showCounts && Number.isFinite(count)) {
+					chip.count = count
+				}
+				return chip
+			})
+		},
+
+		/**
+		 * Whether the widget is a bar of controls (`layout: "bar"`).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/screens-page-controls/specs/page-controls/spec.md#requirement-a-bar-holds-the-pages-controls-in-one-row
+		 */
+		isBar() {
+			return this.content.layout === 'bar' && Array.isArray(this.content.controls)
+		},
+
+		/**
+		 * The bar's controls, each an inline workspace filter of its own.
+		 *
+		 * @return {Array<object>}
+		 */
+		barControls() {
+			return this.content.controls
+				.filter((control) => control && typeof control === 'object')
+				.map((control) => ({ ...control, inline: true }))
+		},
+
+		/** @return {unknown} The value a switch writes when on. */
+		onValue() {
+			return this.content.onValue !== undefined ? this.content.onValue : true
+		},
+
+		/** @return {unknown} The value a switch writes when off. */
+		offValue() {
+			return this.content.offValue !== undefined ? this.content.offValue : false
+		},
+
+		/** @return {boolean} Whether the switch is on. */
+		toggleOn() {
+			return this.selected !== undefined && String(this.selected) === String(this.onValue)
+		},
+
+		/**
+		 * The address key that carries the choice (`urlKey`), or ''.
+		 *
+		 * @return {string}
+		 */
+		urlKey() {
+			return typeof this.content.urlKey === 'string' ? this.content.urlKey : ''
 		},
 
 		/** Whether to render per-option counts. */
@@ -316,17 +439,115 @@ export default {
 		// Seed the selection: existing workspace value → content.default → the
 		// "All" clear option (empty) when present, else the first option once
 		// loaded (handled in loadOptions).
+		const fromAddress = this.readAddress()
 		const existing = this.readWorkspace()
-		if (existing !== undefined) {
+		if (fromAddress !== undefined) {
+			this.selected = fromAddress
+			this.writeWorkspace(fromAddress)
+		} else if (existing !== undefined) {
 			this.selected = existing
 		} else if (this.content.default !== undefined) {
 			this.selected = this.content.default
 			this.writeWorkspace(this.content.default)
+		} else if (this.style === 'toggle') {
+			// A switch starts off, and says so, so a condition on its key holds.
+			this.selected = this.offValue
+			this.writeWorkspace(this.offValue)
 		}
 		this.loadOptions()
 	},
 
+	mounted() {
+		this.onPageRefresh = () => this.loadCounts()
+		subscribe('cn:page:refresh', this.onPageRefresh)
+		this.loadCounts()
+	},
+
+	beforeUnmount() {
+		unsubscribe('cn:page:refresh', this.onPageRefresh)
+	},
+
 	methods: {
+		/**
+		 * The choice named in the address (`?<urlKey>=…`), when it is one of
+		 * the options; undefined otherwise.
+		 *
+		 * @return {string|undefined}
+		 * @spec openspec/changes/screens-page-lenses/specs/page-lenses/spec.md#requirement-the-choice-is-in-the-address
+		 */
+		readAddress() {
+			if (!this.urlKey || !this.$route || !this.$route.query) {
+				return undefined
+			}
+			const raw = this.$route.query[this.urlKey]
+			if (this.style === 'toggle') {
+				if (raw === undefined) {
+					return undefined
+				}
+				return [this.onValue, this.offValue].find((value) => String(value) === String(raw))
+			}
+			const known = this.displayOptions.some((option) => String(option.value) === String(raw))
+			return known ? String(raw) : undefined
+		},
+
+		/**
+		 * Write the choice to the address, replacing the history entry and
+		 * keeping the other query keys.
+		 *
+		 * @param {unknown} value The chosen value.
+		 * @return {void}
+		 * @spec openspec/changes/screens-page-lenses/specs/page-lenses/spec.md#requirement-the-choice-is-in-the-address
+		 */
+		writeAddress(value) {
+			if (!this.urlKey || !this.$router || !this.$route) {
+				return
+			}
+			const query = this.$route.query || {}
+			if (String(query[this.urlKey]) === String(value)) {
+				return
+			}
+			const result = this.$router.replace({ query: { ...query, [this.urlKey]: String(value) } })
+			if (result && typeof result.catch === 'function') {
+				result.catch(() => {})
+			}
+		},
+
+		/**
+		 * Count the lists behind the options that ask (`countFrom`: a list
+		 * `{ register, schema, filter? }`, or several that are added up). One
+		 * list request each; an option whose count failed shows none.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/screens-page-lenses/specs/page-lenses/spec.md#requirement-a-workspace-filter-can-draw-chips-with-counts
+		 */
+		async loadCounts() {
+			const options = this.displayOptions
+			const seq = (this.countSeq = (this.countSeq || 0) + 1)
+			const ctx = { workspace: this.readWorkspaceBag() }
+			await Promise.all(options.map(async (option, index) => {
+				const raw = (Array.isArray(this.content.options) ? this.content.options : [])
+					.find((candidate) => candidate && typeof candidate === 'object' && String(candidate.value ?? candidate.id) === String(option.value))
+				const from = raw ? raw.countFrom : null
+				const lists = (Array.isArray(from) ? from : [from]).filter((list) => list && typeof list === 'object' && list.register && list.schema)
+				if (lists.length === 0) {
+					return
+				}
+				let total
+				try {
+					const parts = await Promise.all(lists.map((list) => fetchListTotal(list.register, list.schema, list.filter || {}, ctx)))
+					if (parts.some((part) => part === null)) {
+						throw new Error('no total')
+					}
+					total = parts.reduce((sum, part) => sum + part, 0)
+				} catch {
+					total = null
+				}
+				if (seq === this.countSeq) {
+					this.optionCounts = { ...this.optionCounts, [index]: total }
+				}
+			}))
+		},
+
 		/**
 		 * Normalise a raw option into `{ value, label, count? }`. Accepts
 		 * `{ value, label, count }`, `{ id, name }`, `{ key, count }` (OR
@@ -503,6 +724,17 @@ export default {
 			this.applySelection(option.value)
 		},
 
+		/**
+		 * Switch handler: write `onValue` or `offValue`.
+		 *
+		 * @param {boolean} on Whether the switch is on.
+		 * @return {void}
+		 * @spec openspec/changes/screens-page-controls/specs/page-controls/spec.md#requirement-a-toggle-and-a-select-are-page-controls
+		 */
+		onToggle(on) {
+			this.applySelection(on ? this.onValue : this.offValue)
+		},
+
 		/**
 		 * NcSelect input handler.
 		 *
@@ -523,6 +755,7 @@ export default {
 		applySelection(value) {
 			this.selected = value
 			this.writeWorkspace(value)
+			this.writeAddress(value)
 			/**
 			 * @event change Emitted when the selection changes. Payload: `{ key, value }`.
 			 */
@@ -610,6 +843,46 @@ export default {
 	gap: 2px;
 }
 
+/* The chips: the compact segmented group, left, in the card the grid draws. */
+.cn-workspace-filter-widget--chips {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+/* A bar: its controls in one row, an `align: "end"` control pushed right. */
+.cn-workspace-filter-widget--bar {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px 16px;
+}
+
+/* An inline control sits in a bar: label left of the control, width to its content. */
+.cn-workspace-filter-widget--inline {
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+	width: auto;
+}
+
+.cn-workspace-filter-widget--inline .cn-workspace-filter-widget__label {
+	font-weight: 400;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-workspace-filter-widget--end {
+	margin-inline-start: auto;
+}
+
+.cn-workspace-filter-widget--end ~ .cn-workspace-filter-widget--end {
+	margin-inline-start: 0;
+}
+
+.cn-workspace-filter-widget__toggle {
+	font-weight: 600;
+}
+
 /* The start card: text left, control (and link) right, as PqDashboard's "Contact starten". */
 .cn-workspace-filter-widget--start {
 	flex-direction: row;
@@ -657,4 +930,29 @@ export default {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.85em;
 }
+
+/* On a phone the bar's controls take a row each (the chips already wrap), and
+   a switch and a select are 44px touch targets. */
+@media (max-width: 640px) {
+	.cn-workspace-filter-widget--bar > .cn-workspace-filter-widget--inline {
+		flex: 1 1 100%;
+	}
+
+	.cn-workspace-filter-widget--bar > .cn-workspace-filter-widget--end {
+		margin-inline-start: 0;
+	}
+
+	.cn-workspace-filter-widget--inline .cn-workspace-filter-widget__toggle {
+		min-height: 44px;
+	}
+
+	.cn-workspace-filter-widget--inline :deep(.v-select) {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	.cn-workspace-filter-widget--inline :deep(.vs__dropdown-toggle) {
+		min-height: 44px;
+	}
+}
 </style>

package/src/components/index.js

@@ -219,7 +219,21 @@ export { CnTasksWidgetForm } from './CnTasksWidgetForm/index.js'
 export { CnSectionsWidget } from './CnSectionsWidget/index.js'
 export { CnFactsWidget } from './CnFactsWidget/index.js'
 export { CnFieldListWidget } from './CnFieldListWidget/index.js'
+export { CnSettingsFormWidget } from './CnSettingsFormWidget/index.js'
+export { CnSwitchRowsWidget } from './CnSwitchRowsWidget/index.js'
+export { CnRadioCardsWidget } from './CnRadioCardsWidget/index.js'
+export { CnChipsFieldWidget } from './CnChipsFieldWidget/index.js'
+export { CnToggleTableWidget } from './CnToggleTableWidget/index.js'
+export { CnChoicePickerWidget } from './CnChoicePickerWidget/index.js'
 export { CnRecordListWidget } from './CnRecordListWidget/index.js'
+export { CnBannerWidget } from './CnBannerWidget/index.js'
+export { default as CnConversationWidget } from './CnConversationThread/CnConversationWidget.vue'
+export { default as CnDocumentReviewWidget } from './CnDocumentReviewList/CnDocumentReviewWidget.vue'
+export { default as CnNextStepWidget } from './CnNextStepCard/CnNextStepWidget.vue'
+export { default as CnAuditTrailWidget } from './CnAuditTrailWidget/CnAuditTrailWidget.vue'
+export { CnKbSearchWidget } from './CnKbSearchWidget/index.js'
+export { CnInteractionFormWidget } from './CnInteractionFormWidget/index.js'
+export { CnWorkspaceFilterWidget } from './CnWorkspaceFilterWidget/index.js'
 export { CnFilePreview } from './CnFilePreview/index.js'
 export { CnTaskFormDialog } from './CnTaskFormDialog/index.js'
 export { CnChildRecordsField } from './CnChildRecordsField/index.js'
@@ -228,6 +242,7 @@ export { CnMarkdownWidget } from './CnMarkdownWidget/index.js'
 export { CnMarkdownWidgetForm } from './CnMarkdownWidgetForm/index.js'
 export { CnObjectListWidget } from './CnObjectListWidget/index.js'
 export { CnObjectListWidgetForm } from './CnObjectListWidgetForm/index.js'
+export { CnSavedViewsWidget } from './CnSavedViewsWidget/index.js'
 export { CnSavedViewWidget } from './CnSavedViewWidget/index.js'
 export { CnSavedViewWidgetForm } from './CnSavedViewWidgetForm/index.js'
 export { CnChartWidgetForm } from './CnChartWidgetForm/index.js'

package/src/composables/useListView.js

@@ -1,5 +1,6 @@
 import { computed, isRef, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useObjectStore } from '../store/index.js'
+import { facetFilterParams } from '../utils/facets.js'
 
 /**
  * Composable for managing list view state with full objectStore integration.
@@ -163,10 +164,9 @@ export function useListView(objectTypeOrOptions, options) {
 		}
 
 		for (const [key, values] of Object.entries(activeFilters.value)) {
-			if (values && values.length > 0) {
-				// Single-value arrays are unwrapped to scalar params
-				params[key] = values.length === 1 ? values[0] : values
-			}
+			// Single-value arrays are unwrapped to scalar params; the
+			// missing-value option becomes `<key>_isnull=true`.
+			Object.assign(params, facetFilterParams(key, values))
 		}
 
 		// Fixed filters (e.g. a route-param-scoped `pages[].config.filter`) are

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

@@ -202,6 +202,15 @@
 	gap: 4px;
 }
 
+/* No inner scroller: tabs that do not fit the width wrap onto a second row
+   instead of scrolling sideways (the library's default strip), so the strip
+   has no scrollbar, no clipped tab and no fade or chevron to find the rest. */
+.cn-look-board .cn-tabs--board .cn-tabs__nav {
+	flex-wrap: wrap;
+	overflow: visible;
+	row-gap: 4px;
+}
+
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item {
 	background-color: var(--color-background-dark);
 	border: 1px solid var(--color-border-dark);
@@ -347,12 +356,28 @@
 	padding: 0 0 10px;
 }
 
-.cn-look-board .cn-object-data-widget__label {
-	color: var(--color-text-maxcontrast);
+/* Outranks the component's own `.cn-object-data-widget__label[data-v-...]`
+   (weight 500, 0.85em, which has the same specificity as the look's rule and
+   wins on source order wherever a bundle, such as a companion app's, loads
+   after this stylesheet), through the grid the labels sit in. Measured live:
+   the labels read bold and dark where the boards (DqContact, PqKlant, ShKlant)
+   draw them 13px, regular weight and light grey.
+
+   The colour carries `!important`: a theme (nldesign's element overrides) sets
+   the ink of every `div` outside the header with a selector that has an id in
+   its `:not()`, which no class rule outranks. */
+.cn-look-board .cn-object-data-widget__grid .cn-object-data-widget__label {
+	color: var(--color-text-maxcontrast) !important;
 	font-size: 13px;
 	font-weight: 400;
 }
 
+/* The facts card's labels: the same light grey, regular weight. */
+.cn-look-board .cn-facts-widget .cn-facts-widget__label {
+	color: var(--color-text-maxcontrast);
+	font-weight: 400;
+}
+
 .cn-look-board .cn-object-data-widget__value {
 	font-weight: 500;
 }
@@ -610,3 +635,12 @@
 	font-size: 13px;
 	margin: 2px 0 0;
 }
+
+/* The sidebar's own open toggle (NcAppSidebar's `.app-sidebar__toggle`, drawn
+   when the sidebar is closed) is positioned over the content's top-right
+   corner, which in this look is the header's last button: a stray square icon
+   on "More". The board draws none, so it is hidden on a detail page and the
+   header menu offers "Open sidebar" instead. */
+.cn-look-board:has(.cn-detail-page) > .app-sidebar__toggle {
+	display: none;
+}

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

@@ -249,7 +249,8 @@
 }
 
 /* Filter: a labelled secondary button, 36px, radius 8, with the active count. */
-.cn-look-board .cn-actions-bar__filter-button.button-vue {
+.cn-look-board .cn-actions-bar__filter-button.button-vue,
+.cn-look-board .cn-actions-bar__filter-menu .button-vue {
 	min-height: 36px;
 	height: 36px;
 	border-radius: 8px;
@@ -499,11 +500,16 @@
 	max-width: calc(100% - 26px);
 }
 
-/* The selection column: 28px, 18px checkboxes. */
+/* The selection column: 18px checkboxes, 28px of content after 16px of padding.
+   The box model is set with `!important` and the widths include the padding:
+   Nextcloud's server.css sets `box-sizing: border-box` on everything under
+   `#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). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox {
-	box-sizing: content-box;
-	width: 28px;
-	min-width: 28px;
+	box-sizing: border-box !important;
+	width: 44px;
+	min-width: 44px;
 	padding-inline: 16px 0;
 	text-align: start;
 }
@@ -551,6 +557,29 @@
 	font-size: 13px;
 }
 
+/* An avatar in the title column (PtAccounts): a 32px chip circle, 10px before
+   the name, the e-mail under the name beside it. The name keeps the title's
+   weight and size, and its underline: an inline-flex box is atomic, so the
+   cell's own underline does not reach it. */
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar {
+	gap: 10px;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials {
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+	font-size: 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;
+}
+
+.cn-look-board .cn-table-container--board.cn-table-container--title-plain .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {
+	text-decoration: none;
+}
+
 /* 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 {
@@ -561,10 +590,12 @@
 	line-height: 1.4;
 }
 
-/* The row menu column holds one 34px button. */
+/* The row menu column holds one 34px button between 16px of padding, so 66px
+   border to border (see the selection column for why the box model is forced). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--actions {
-	width: 34px;
-	min-width: 0;
+	box-sizing: border-box !important;
+	width: 66px;
+	min-width: 66px;
 	padding-inline: 16px;
 	text-align: end;
 }