@conduction/nextcloud-vue 2.140.0 → 2.142.0

package/l10n/en.json

@@ -2381,7 +2381,17 @@
     "me": "me",
     "Open profile": "Open profile",
     "Link a contact from your address book.": "Link a contact from your address book.",
-    "The value could not be shown.": "The value could not be shown."
+    "The value could not be shown.": "The value could not be shown.",
+    "No value": "No value",
+    "Link an existing card": "Link an existing card",
+    "New card": "New card",
+    "Could not link card.": "Could not link card.",
+    "Could not create card.": "Could not create card.",
+    "This card is already linked.": "This card is already linked.",
+    "From {date}": "From {date}",
+    "Until {date}": "Until {date}",
+    "More actions for {name}": "More actions for {name}",
+    "Unlink contact": "Unlink contact"
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -1989,7 +1989,7 @@
     "Save current view": "Huidige weergave opslaan",
     "Share view: {name}": "Weergave delen: {name}",
     "The view \"{name}\" leaves your list and the menu on the left.": "De weergave \"{name}\" verdwijnt uit uw lijst en uit het menu links.",
-    "Whoever gets the view sees it under Shared with me. It is yours and stays yours.": "Wie de weergave krijgt, ziet die onder Gedeeld met mij. Die is van u en blijft dat.",
+    "Whoever gets the view sees it under Shared with me. It is yours and stays yours.": "Wie de weergave krijgt, ziet hem onder Gedeeld met mij. Hij is van u en blijft dat.",
     "Whoever you share the view with sees the change at once.": "Iedereen met wie u de weergave deelt, ziet de wijziging meteen.",
     "Reason": "Reden",
     "Could not be read": "Kon niet worden gelezen",
@@ -2634,7 +2634,17 @@
     "The value could not be shown.": "De waarde kon niet worden getoond.",
     "Save as draft": "Opslaan als concept",
     "Draft saved at {time}": "Concept opgeslagen om {time}",
-    "The draft could not be saved": "Het concept kon niet worden opgeslagen"
+    "The draft could not be saved": "Het concept kon niet worden opgeslagen",
+    "No value": "Geen waarde",
+    "Link an existing card": "Bestaande kaart koppelen",
+    "New card": "Nieuwe kaart",
+    "Could not link card.": "De kaart kon niet worden gekoppeld.",
+    "Could not create card.": "De kaart kon niet worden gemaakt.",
+    "This card is already linked.": "Deze kaart is al gekoppeld.",
+    "From {date}": "Vanaf {date}",
+    "Until {date}": "Tot {date}",
+    "More actions for {name}": "Meer acties voor {name}",
+    "Unlink contact": "Contact ontkoppelen"
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.140.0",
+  "version": "2.142.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/CnAssignDialog/CnAssignDialog.vue

@@ -89,6 +89,7 @@ import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcCheckboxRadioSwitch, NcTextArea } from '@nextcloud/vue'
 import { fetchEndpointSource, interpolateUrlTokens } from '../../composables/useEndpointSource.js'
 import { fillTemplate } from '../../utils/fillTemplate.js'
+import { groupSublines } from '../../utils/groupSublines.js'
 import { readPath } from '../../utils/readPath.js'
 import { searchNextcloudGroups, searchNextcloudUsers } from '../../utils/userAutocomplete.js'
 import { CnDialog } from '../CnDialog/index.js'
@@ -134,7 +135,10 @@ export function withTypedAssignee(found, typed, label) {
  *   `eyebrow` a template filled from the record.
  * - `source`: an endpointSource to read the record from, else `object`.
  * - `assignee`: `{ kinds?, label?, placeholder?, hint?, currentPath?,
- *   currentHint?, currentAs?, allowTyped?, field?, kindField? }`. `kinds` is `["group"]`
+ *   currentHint?, currentAs?, allowTyped?, field?, kindField?, describe? }`.
+ *   `describe` (`{ register, schema, groupField?, textField? }`) names the
+ *   records that hold a team's description; each team option then reads
+ *   "{count} members · {description}", the count where the viewer may read it. `kinds` is `["group"]`
  *   (default), `["user"]` or both; `currentPath` reads who has it now from the
  *   record and `currentHint` ("Now with {current}.", the placeholder named
  *   by `currentAs`) says so, in place of `hint`; `allowTyped`
@@ -398,8 +402,12 @@ export default {
 			if (seq !== this.searchSeq) {
 				return
 			}
+			const lines = await groupSublines(groups.map((g) => g.id), typed, this.assigneeConfig.describe || null)
+			if (seq !== this.searchSeq) {
+				return
+			}
 			const found = [
-				...groups.map((g) => ({ id: g.id, label: g.label, secondary: g.subline || '', icon: 'AccountGroupOutline', kind: 'group' })),
+				...groups.map((g) => ({ id: g.id, label: g.label, secondary: lines[g.id] || g.subline || '', icon: 'AccountGroupOutline', kind: 'group' })),
 				...users.map((u) => ({ id: u.id, label: u.label, secondary: u.subline || '', avatar: true, kind: 'user' })),
 			]
 			this.options = this.assigneeConfig.allowTyped ? withTypedAssignee(found, typed, t('nextcloud-vue', 'Use "{name}"', { name: typed })) : found

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -175,7 +175,7 @@
 		</template>
 		<template v-else-if="widget === 'avatar'">
 			<span v-if="avatarName || avatarUserId" class="cn-cell-renderer__avatar">
-				<span v-if="avatarUserId" class="cn-cell-renderer__avatar-picture" aria-hidden="true">
+				<span v-if="avatarUserId && !isBoardLook" class="cn-cell-renderer__avatar-picture" aria-hidden="true">
 					<NcAvatar
 						:user="avatarUserId"
 						:displayName="avatarName || avatarUserId"
@@ -186,6 +186,7 @@
 				<span
 					v-else
 					class="cn-cell-renderer__avatar-initials"
+					:class="avatarToneClass"
 					:style="{ width: avatarSize + 'px', height: avatarSize + 'px' }"
 					aria-hidden="true">{{ avatarInitials }}</span>
 				<span class="cn-cell-renderer__avatar-text">
@@ -942,6 +943,19 @@ export default {
 		 * @return {number}
 		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-avatar-and-date-cells
 		 */
+		/**
+		 * `avatar` widget: the chip's tone class in the board look,
+		 * `widgetProps.tone` `neutral` (DqContacten's grey chip) or the
+		 * default light primary.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/board-avatar-chip/specs/data-table/spec.md#requirement-a-board-avatar-cell-draws-the-initials-chip
+		 */
+		avatarToneClass() {
+			const tone = this.widgetProps && this.widgetProps.tone
+			return tone === 'neutral' ? 'cn-cell-renderer__avatar-initials--neutral' : ''
+		},
+
 		avatarSize() {
 			const size = Number(this.widgetProps && this.widgetProps.size)
 			return Number.isFinite(size) && size > 0 ? size : (this.isBoardLook ? 32 : 24)
@@ -1737,8 +1751,9 @@ export default {
 
 		/**
 		 * The swatch colour — read from the sibling row field named by
-		 * `format.colorField` (default `'color'`). Returns null when no usable
-		 * colour string is present (the dot is then omitted).
+		 * `format.colorField` (default `'color'`), through `format.colorMap`
+		 * when given (a stored name such as `blue` to a CSS colour). Returns
+		 * null when no usable colour is present (the dot is then omitted).
 		 *
 		 * @return {string|null}
 		 */
@@ -1748,7 +1763,14 @@ export default {
 			}
 			const field = (this.format && this.format.colorField) || 'color'
 			const c = this.row && this.row[field]
-			return (typeof c === 'string' && c.trim() !== '') ? c : null
+			if (typeof c !== 'string' || c.trim() === '') {
+				return null
+			}
+			const map = this.format && this.format.colorMap
+			if (map && typeof map === 'object') {
+				return typeof map[c] === 'string' && map[c] !== '' ? map[c] : null
+			}
+			return c
 		},
 
 		formattedValue() {

package/src/components/CnChartWidget/CnChartWidget.md

@@ -135,3 +135,4 @@ The `dataSource` OBJECT-form `aggregate` (Wave 3, #91) — `{ groupBy, metric?:
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `widgetId` | String | `''` | Matches `cn:widget:refresh` event-bus events; on a matching id the chart re-queries its `dataSource`. Also exposes a ref-callable `refresh()`. |
+| `barValueAtEnd` | Boolean | `false` | A `bar-list` without a track: each bar as long as its share and its value right after the bar's end (DqProcesanalyse "Doorlooptijd per status"). False keeps the track and the value column. |

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -65,7 +65,7 @@
 		     share of `barMax` (default the largest value), the value at the
 		     end. Rows navigate when the source declares a drilldown. -->
 		<div v-else-if="type === 'bar-list'" class="cn-chart-widget__html" data-testid="cn-chart-widget-bar-list">
-			<ul class="cn-chart-widget__bar-list">
+			<ul class="cn-chart-widget__bar-list" :class="{ 'cn-chart-widget__bar-list--value-at-end': barValueAtEnd }">
 				<li v-for="row in barListRows" :key="row.index" class="cn-chart-widget__bar-row">
 					<component
 						:is="row.drill ? 'button' : 'div'"
@@ -75,10 +75,16 @@
 						data-testid="cn-chart-widget-bar-row"
 						@click="row.drill ? onDataPointSelection(null, null, { dataPointIndex: row.index }) : null">
 						<span class="cn-chart-widget__bar-label">{{ row.label }}</span>
-						<span class="cn-chart-widget__bar-track" aria-hidden="true">
-							<span class="cn-chart-widget__bar-fill" :style="{ width: `${row.share}%` }" />
+						<span v-if="barValueAtEnd" class="cn-chart-widget__bar-track">
+							<span class="cn-chart-widget__bar-fill" aria-hidden="true" :style="{ flexBasis: `${row.share}%` }" />
+							<span class="cn-chart-widget__bar-value">{{ row.text }}</span>
 						</span>
-						<span class="cn-chart-widget__bar-value">{{ row.text }}</span>
+						<template v-else>
+							<span class="cn-chart-widget__bar-track" aria-hidden="true">
+								<span class="cn-chart-widget__bar-fill" :style="{ width: `${row.share}%` }" />
+							</span>
+							<span class="cn-chart-widget__bar-value">{{ row.text }}</span>
+						</template>
 					</component>
 				</li>
 			</ul>
@@ -468,6 +474,18 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * A `bar-list` without a track: each bar as long as its share and its
+		 * value right after the bar's end (DqProcesanalyse "Doorlooptijd per
+		 * status"). False, the default, keeps the track and the value column.
+		 *
+		 * @spec openspec/changes/chart-bar-list-value-at-end/specs/chart-bar-list-value-at-end/spec.md#requirement-a-bar-list-can-put-each-value-at-its-bars-end
+		 */
+		barValueAtEnd: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * A `matrix`'s row-label column width in px. Null, the default, sizes
 		 * the column to its longest label (at least 120px); a width wraps a
@@ -3006,6 +3024,33 @@ export default {
 	white-space: nowrap;
 }
 
+/* `barValueAtEnd`: no track; the bar takes its share of the row and gives way
+   to the value right after its end, so the longest bar still fits. */
+.cn-chart-widget__bar-list--value-at-end .cn-chart-widget__bar-line {
+	grid-template-columns: minmax(80px, 130px) minmax(0, 1fr);
+}
+
+.cn-chart-widget__bar-list--value-at-end .cn-chart-widget__bar-track {
+	align-items: center;
+	background: none;
+	display: flex;
+	gap: 6px;
+	height: auto;
+	overflow: visible;
+}
+
+.cn-chart-widget__bar-list--value-at-end .cn-chart-widget__bar-fill {
+	border-radius: 4px;
+	flex: 0 1 auto;
+	height: 18px;
+	min-width: 2px;
+}
+
+.cn-chart-widget__bar-list--value-at-end .cn-chart-widget__bar-value {
+	flex: none;
+	text-align: start;
+}
+
 .cn-chart-widget__footnote {
 	color: var(--color-text-maxcontrast);
 	margin: 0;

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -1150,6 +1150,7 @@ const CHART_PROP_KEYS = [
 	'endpointSource',
 	// `bar-list` / `matrix` presentation keys.
 	'barMax',
+	'barValueAtEnd',
 	'matrixLabelWidth',
 	'footnote',
 	'highlight',

package/src/components/CnDataTable/CnDataTable.md

@@ -194,6 +194,7 @@ export default {
 | `scrollable` | Boolean | `false` | Constrain height and make the table vertically scrollable |
 | `loadingText` | String | `'Loading…'` | Text shown below the spinner during loading |
 | `rowIcon` | String \| Function | `null` | Optional leading icon for every row: a static MDI name applied to all rows, or `(row) => iconName` to vary it per row (resolved via the CnIcon registry). Unset = no icon column. |
+| `rowIconTone` | String | `'primary'` | The tone of the leading icon's tile in the board look: `primary`, `teal` or `neutral` (DqOrganisaties draws a teal tile). |
 | `rowIndicators` | Array | `[]` | State indicators the page declares for its rows: `{ id, field, equals?, in?, icon, text, tooltip? }`. The condition is `equals`, `in`, or plain truthiness when neither is given. `text` is required, so an indicator is never colour and shape alone. The page declares which indicators exist; a record cannot add one it has not declared. |
 | `rowIndicatorCap` | Number | `3` | How many declared indicators render on the row before the rest move into the row menu, reachable as `indicatorsFor(row).overflow`. |
 | `selectAllLabel` | String | `'Select all rows'` | Accessible name (`aria-label`) for the header select-all checkbox, so screen readers announce a named control (WCAG 4.1.2) |

package/src/components/CnDataTable/CnDataTable.vue

@@ -6,6 +6,7 @@
 			'cn-table-container--board': isBoardLook,
 			'cn-table-container--title-plain': isBoardLook && rowTitle === 'plain',
 			'cn-table-container--title-text': isBoardLook && rowTitle === 'text',
+			'cn-table-container--title-strong': isBoardLook && rowTitle === 'strong',
 			'cn-table-container--scrollable': scrollable,
 			'cn-table-container--borderless': borderless,
 			'cn-table-container--fill': fillHeight,
@@ -275,7 +276,7 @@
 							<td
 								v-if="rowIcon"
 								class="cn-table-col--icon"
-								:class="pinClass(selectable ? 1 : 0)"
+								:class="[pinClass(selectable ? 1 : 0), 'cn-table-col--icon-' + iconTone]"
 								:style="pinStyle(selectable ? 1 : 0)">
 								<CnIcon :name="getRowIcon(row)" :size="20" />
 							</td>
@@ -649,6 +650,17 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * The tone of the leading icon's tile in the board look: `primary`
+		 * (default), `teal` or `neutral` (DqOrganisaties draws a teal tile).
+		 *
+		 * @type {string}
+		 */
+		rowIconTone: {
+			type: String,
+			default: 'primary',
+		},
+
 		/**
 		 * State indicators a page declares for its rows. Each entry is
 		 * `{ id, field, equals?, in?, icon, text, tooltip? }`: `field` is a
@@ -856,8 +868,10 @@ export default {
 		 * the 15px bold title without an underline and a 13px muted secondary
 		 * line, as the PqTickets and OcPublicaties boards draw it; `text` is an
 		 * ordinary cell, for a log table whose first column is a date
-		 * (DqZaakContact). The row stays clickable either way. The Nextcloud
-		 * look ignores it.
+		 * (DqZaakContact); `strong` is the cell's own size at weight 600 in the
+		 * main ink without an underline, the name column of a card's list
+		 * (DqZaaktypeStatussen). The row stays clickable either way. The
+		 * Nextcloud look ignores it.
 		 *
 		 * @spec openspec/changes/screens-table-rows-parity/specs/index-list-board-look/spec.md#requirement-a-row-title-can-be-plain-text
 		 * @spec openspec/changes/board-log-table-plain-cells/specs/board-log-table-plain-cells/spec.md#requirement-a-tables-title-column-can-read-as-plain-text
@@ -865,7 +879,7 @@ export default {
 		rowTitle: {
 			type: String,
 			default: 'link',
-			validator: (value) => ['link', 'plain', 'text'].includes(value),
+			validator: (value) => ['link', 'plain', 'text', 'strong'].includes(value),
 		},
 
 		/**
@@ -1173,6 +1187,16 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The leading icon tile's tone, one the board look draws.
+		 *
+		 * @return {string} `primary`, `teal` or `neutral`.
+		 * @spec openspec/changes/board-row-icon-tile/specs/data-table/spec.md#requirement-a-board-tables-leading-icon-sits-on-a-tile
+		 */
+		iconTone() {
+			return ['primary', 'teal', 'neutral'].includes(this.rowIconTone) ? this.rowIconTone : 'primary'
+		},
+
 		/**
 		 * Whether the table is drawn as the board look's white card.
 		 *

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -249,7 +249,7 @@ import { formatBoardDate } from '../../utils/boardDate.js'
 import { conditionalLine } from '../../utils/conditionalLine.js'
 import { parseDateValue } from '../../utils/dateVariant.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
-import { fillTemplate } from '../../utils/fillTemplate.js'
+import { fillTemplate, formatLongDate } from '../../utils/fillTemplate.js'
 import { formatMoney, metricLocale, unwrapAppConfig } from '../../utils/formatMetric.js'
 import { readPath } from '../../utils/readPath.js'
 import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveFilterTokens.js'
@@ -416,6 +416,8 @@ export default {
 		cnDispatchAction: { default: null },
 		/** The page's object sidebar channel; a `link.sidebarTab` opens one of its tabs. */
 		objectSidebarState: { default: null },
+		/** The records the detail page reads beside the record (`@context.<name>`), for a `labelPath`. */
+		cnDetailVisibilityRows: { default: null },
 	},
 
 	props: {
@@ -432,13 +434,14 @@ export default {
 		 *   `route` (`{ name, params?, query? }`, `@source.<path>` in a param) on a `title` or a `row` links its value to that route; a param that does not fill leaves it plain.
 		 *   `format: 'user'` shows a Nextcloud user id as the user's display name, read once per id; the entry stays empty until the name is known.
 		 *   `template` ("{available} {unit}") fills its `{path}` placeholders from the record instead of reading `path`; it is empty when every placeholder is. `suffix` (" kg") is added to a value that is not empty.
+		 *   `labelPath` ("@context.caseType.handlerLabel") names a value on the record or the page's `@context` records that labels the row when it holds text; `label` is the fallback.
 		 *   `emptyValue` ("No") is shown, translated, when the entry has no value, so the entry stays drawn whatever `hideEmpty` says (an override that was never set reads "No").
 		 * - `action` — an action drawn as a button under the facts; `headerAction` — one drawn in the card header (reported through the `header` event).
 		 * - `actions` — action buttons under the facts in the `headerActions` shape (`api-call`, `open-form`, `navigate`, `open-modal`, ...; `confirm`, `variant`). `@source.<field>` names a field of the record shown, and an action whose token names an empty field is not drawn. `visibleWhen` reads the record shown; `adminOnly: true` draws the action for an instance admin only (visibility, never authorisation). An api-call or a saved form refreshes the page, and the facts read their source again.
 		 * - `rowsPath` — a path to a list of `{ label, value }` the record holds, drawn as rows after `fields` (a preview the server builds).
 		 * - `headerPill` — a status pill in the card header (reported through the `header` event): `{ path?, text?, map?, variant?, variantMap?, colorMap? }`, read from the record like a `pill` entry (DqBezwaar "Advies ontvangen"); nothing shows while the value is empty.
 		 * - `notice` — `{ text, variant? }`, a note band inside the card under the facts (`info` by default; `success`, `warning` or `error`); the text is translated.
-		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `list` (an array joined by ", ", each item read at `itemPath`), `bytes` (a size, "1.5 MB"), `number` (in the reader's language, `decimals` fraction digits when set) or `currency` (a money amount in the reader's language, "€ 1.234,50": the code in `currency`, else the record's `currencyField`, else the app's reporting currency, else EUR; `decimals` defaults to 2).
+		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `longdate` (the month written out, the year only outside this year: "3 oktober"), `list` (an array joined by ", ", each item read at `itemPath`), `bytes` (a size, "1.5 MB"), `number` (in the reader's language, `decimals` fraction digits when set) or `currency` (a money amount in the reader's language, "€ 1.234,50": the code in `currency`, else the record's `currencyField`, else the app's reporting currency, else EUR; `decimals` defaults to 2).
 		 *   `map` turns a raw value into a label (translated). `parts` (on a `line`) lists paths, or `{ path, label?, format? }`, joined by `separator` (default " · "); empty parts are dropped.
 		 * - `source` — `{ register, schema, id }` or `{ url }`; omitted = the current object. `{ register, schema, filter, sort? }` without `id` reads the first object that matches `filter` in `sort` order (`{ field, dir }`): the latest count of a shift. An entry with `from: "object"` reads the current object even then (a client card that also shows the ticket's channel).
 		 * - `endpointSource` — `{ url, method?, params?, responsePath? }`, the block a stat or chart takes: the facts read an app endpoint, shared and cached like those.
@@ -722,7 +725,7 @@ export default {
 				}
 				if (kind === 'row') {
 					const last = out[out.length - 1]
-					const row = { key, label: this.tr(field.label || ''), value, ...this.rowExtras(record, field, value) }
+					const row = { key, label: this.labelOf(record, field), value, ...this.rowExtras(record, field, value) }
 					if (field.route && !row.href) {
 						row.to = this.resolveRoute(field.route, record)
 					}
@@ -1406,6 +1409,30 @@ export default {
 			}
 		},
 
+		/**
+		 * A row's label: the value at `labelPath` (the record, or the page's
+		 * `@context.<name>` records) when it holds text, else `label`, both
+		 * through the host translate. A case type can name its handler
+		 * ("Regisseur") while another keeps "Behandelaar".
+		 *
+		 * @param {object} record The record shown.
+		 * @param {object} field The entry.
+		 * @return {string}
+		 * @spec openspec/changes/facts-label-from-path/specs/facts-widget/spec.md#requirement-a-facts-row-can-take-its-label-from-the-record-or-its-context
+		 */
+		labelOf(record, field) {
+			if (typeof field.labelPath === 'string' && field.labelPath !== '') {
+				const rows = this.cnDetailVisibilityRows && typeof this.cnDetailVisibilityRows === 'object' && 'value' in this.cnDetailVisibilityRows
+					? this.cnDetailVisibilityRows.value
+					: this.cnDetailVisibilityRows
+				const named = readPath({ ...(record || {}), '@context': rows || {} }, field.labelPath)
+				if (typeof named === 'string' && named.trim() !== '') {
+					return this.tr(named.trim())
+				}
+			}
+			return this.tr(field.label || '')
+		},
+
 		/**
 		 * Copy a row's value to the clipboard.
 		 *
@@ -1775,6 +1802,10 @@ export default {
 					.filter((item) => item !== '')
 				return items.join(', ')
 			}
+			// The month written out, the year only outside this year: "3 oktober".
+			if (format === 'longdate') {
+				return formatLongDate(raw)
+			}
 			if (format === 'date' || format === 'date-long') {
 				const date = parseDateValue(raw)
 				if (date === null) {

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -5,7 +5,7 @@
 <template>
 	<div
 		class="cn-files-browser"
-		:class="{ 'cn-files-browser--dragging': dragging, 'cn-files-browser--drop-panel': dropOverlay && dropDetail !== '' }"
+		:class="{ 'cn-files-browser--dragging': dragging, 'cn-files-browser--drop-panel': dropOverlay && dropDetailTemplate !== '' }"
 		data-testid="cn-files-browser"
 		@dragenter.prevent="onDragEnter"
 		@dragover.prevent="onDragOver"
@@ -1094,10 +1094,22 @@ export default {
 		 * @spec openspec/changes/files-drop-panel/specs/files-browser/spec.md#requirement-the-drop-state-fills-the-panel-and-says-where-the-files-go
 		 */
 		dropDetail: {
-			type: String,
+			type: [String, Array],
 			default: '',
 		},
 
+		/**
+		 * Named values filled into `dropDetail` as `{name}`, such as the case
+		 * number (`{ "case": "@object.identifier" }` in a detail page's props).
+		 * While a value is unknown the line is left out.
+		 *
+		 * @spec openspec/changes/files-drop-detail-values/specs/files-drop-detail-values/spec.md#requirement-the-drop-detail-line-can-name-the-record
+		 */
+		dropDetailValues: {
+			type: Object,
+			default: null,
+		},
+
 		/** Show a line under the list saying files can be dropped on it. */
 		dropHint: {
 			type: Boolean,
@@ -1390,6 +1402,22 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The `dropDetail` text: the string, or the text of the first variant
+		 * `{ when, text }` whose `when` is `true` or that has none.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/files-drop-detail-values/specs/files-drop-detail-values/spec.md#requirement-the-drop-detail-line-can-name-the-record
+		 */
+		dropDetailTemplate() {
+			if (typeof this.dropDetail === 'string') {
+				return this.dropDetail
+			}
+			const variants = Array.isArray(this.dropDetail) ? this.dropDetail : []
+			const chosen = variants.find((item) => item && typeof item.text === 'string' && (!('when' in item) || item.when === true))
+			return chosen ? chosen.text : ''
+		},
+
 		/**
 		 * `dropDetail` through the host translate with `{count}` filled, '' when
 		 * there is none or the count it needs is unknown.
@@ -1398,10 +1426,22 @@ export default {
 		 * @return {string}
 		 */
 		dropDetailText() {
-			if (!this.dropDetail) {
+			const template = this.dropDetailTemplate
+			if (!template) {
 				return ''
 			}
-			const text = this.cnTranslate(this.dropDetail)
+			let text = this.cnTranslate(template)
+			// `dropDetailValues`: named values such as the case number; a value
+			// still unknown (an unresolved `@` token, or empty) leaves the line out.
+			// @spec openspec/changes/files-drop-detail-values/specs/files-drop-detail-values/spec.md#requirement-the-drop-detail-line-can-name-the-record
+			const values = this.dropDetailValues && typeof this.dropDetailValues === 'object' ? this.dropDetailValues : {}
+			for (const [name, value] of Object.entries(values)) {
+				const shown = value === null || value === undefined ? '' : String(value)
+				if (shown === '' || shown.startsWith('@')) {
+					return ''
+				}
+				text = text.split(`{${name}}`).join(shown)
+			}
 			if (!text.includes('{count}')) {
 				return text
 			}

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -875,6 +875,7 @@
 					:columns="renderedColumns"
 					:pinnedCount="pinnedColumnCount"
 					:rowIcon="rowIcon"
+					:rowIconTone="rowIconTone"
 					:rowIndicators="rowIndicators"
 					:rowIndicatorCap="rowIndicatorCap"
 					:rows="displayObjects"
@@ -3185,6 +3186,17 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * The leading icon's tile tone in the board look (`primary`, `teal`,
+		 * `neutral`), from `pages[].config.rowIconTone`. Forwarded to CnDataTable.
+		 *
+		 * @type {string}
+		 */
+		rowIconTone: {
+			type: String,
+			default: 'primary',
+		},
+
 		/** Columns to exclude in schema mode */
 		excludeColumns: {
 			type: Array,
@@ -6422,6 +6434,7 @@ export default {
 				r: this.register,
 				s: this.exportSchemaSlug,
 				f: this.filter || null,
+				a: this.effectiveActiveFilters || null,
 				e: this.countEntries,
 				// The store's total, not the error override in effectivePagination,
 				// so a failed fetch and its recovery do not refetch the counts.
@@ -10012,7 +10025,15 @@ export default {
 			const counts = await fetchFilterCounts({
 				register: this.register,
 				schema,
-				entries: this.countEntries.map((entry) => ({ key: entry.key, filter: resolveFilterMap(entry.filter, params, ctx) })),
+				// A quick filter counts within the list as filtered (the
+				// active filters, its own field its own); a saved view counts
+				// its own query.
+				entries: this.countEntries.map((entry) => ({
+					key: entry.key,
+					filter: entry.key.startsWith('tab:')
+						? { ...(this.effectiveActiveFilters || {}), ...resolveFilterMap(entry.filter, params, ctx) }
+						: resolveFilterMap(entry.filter, params, ctx),
+				})),
 				baseFilter: resolveFilterMap(this.filter, params, ctx),
 				ctx,
 			})

package/src/components/CnIndexPage/useSelfFetchList.js

@@ -5,7 +5,9 @@ import { useObjectStore } from '../../store/index.js'
 // Both filter resolvers live in `utils/routeFilters.js` so CnLogsPage applies
 // the same two grammars (route-param interpolation + `?key=value` deep links)
 // without pulling in this composable's index-only sidebar/subscription wiring.
+import { loadMyTeam } from '../../utils/myTeam.js'
 import { withPersonalLenses } from '../../utils/personalLenses.js'
+import { dropOptionalUnresolved, MY_TEAM_TOKEN, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { parseSortKeysFromQuery, resolveFilterMap, resolveQueryFilters } from '../../utils/routeFilters.js'
 import { orderToSortKeys } from '../../utils/sortOrder.js'
 
@@ -392,6 +394,18 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 	// a reactive getter so a runtime flip attaches/detaches accordingly.
 	// Stores without live-updates support (no `subscribe` action) are a
 	// silent no-op inside the composable, keeping this fully inert.
+	// An address carrying `@myTeam` (a shared link) waits for the team, as a
+	// saved view on it does: once read, the token becomes the team, or goes
+	// for a reader in none.
+	const carriesMyTeam = Object.values(initialActiveFilters || {})
+		.some((value) => value === MY_TEAM_TOKEN || (Array.isArray(value) && value.includes(MY_TEAM_TOKEN)))
+	if (carriesMyTeam) {
+		loadMyTeam().then(() => {
+			list.activeFilters.value = dropOptionalUnresolved(resolveFilterTokens(list.activeFilters.value, tokenCtx()))
+			list.refresh(1)
+		})
+	}
+
 	useObjectSubscription(objectStore, () => objectType.value, null, {
 		enabled: () => props.subscribe !== false,
 	})