@conduction/nextcloud-vue 2.96.0 → 2.98.0

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -1232,11 +1232,13 @@ import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import CnSummaryAggregates from '../CnSummaryAggregates/CnSummaryAggregates.vue'
 import CnTranslatedBadge from '../CnTranslatedBadge/CnTranslatedBadge.vue'
 import CnDetailHeaderChips from './CnDetailHeaderChips.vue'
+import { resolveRecordSource } from '../../composables/indexSources.js'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { useObjectLock } from '../../composables/useObjectLock.js'
 import { useObjectPresence } from '../../composables/useObjectPresence.js'
 import { useObjectSubscription } from '../../composables/useObjectSubscription.js'
+import { createRefLabelResolver } from '../../composables/useRefLabels.js'
 import { gridLayout } from '../../mixins/gridLayout.js'
 import { pageViews } from '../../mixins/pageViews.js'
 import { useObjectStore } from '../../store/index.js'
@@ -1909,6 +1911,23 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Name of a registered entity source that reads ONE record (manifest
+		 * `config.entitySource`), for a record that is not a register/schema
+		 * object. The same registry and the same name as `CnIndexPage`'s
+		 * `entitySource`: `organisations` shows the OpenRegister organisation
+		 * whose uuid is `objectId`. The record feeds the header, pills, facts,
+		 * widgets and the `@objectId` / `@object.*` tokens exactly as a fetched
+		 * object does. Wins over `register` + `schema`. Empty (the default)
+		 * leaves the page on its object store.
+		 *
+		 * @type {string}
+		 */
+		entitySource: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * OpenRegister register slug. Pair with `schema` to opt into the
 		 * schema-driven mode: the page fuses the two into an internal
@@ -2863,6 +2882,10 @@ export default {
 			pillCounts: {},
 			/** Sequence of the last pill count round, so a late answer does not overwrite a newer one. */
 			pillCountSeq: 0,
+			/** The labels of the records pills with `resolve` point at, by pill key. */
+			pillRefLabels: {},
+			/** Sequence of the last pill label lookup, so a late answer for another record is dropped. */
+			pillRefSeq: 0,
 			/** `register/schema/id` the read-state call was last made for, so it is sent once per load. */
 			readStateSentFor: '',
 			/** Whether the user is arranging the chosen view (`userLayout`). */
@@ -3384,7 +3407,16 @@ export default {
 					const pill = pillCountSource(config)
 						? resolveCountPill(config, this.pillCounts[key], (text) => this.effectiveTranslate(text))
 						: resolvePill(config, this.resolvedObject)
-					return pill ? { ...pill, key, label: this.effectiveTranslate(pill.label) } : null
+					if (!pill) {
+						return null
+					}
+					// `resolve`: the referenced record's label replaces the id, and
+					// keys the colour too ("Woo-verzoek", not a uuid).
+					const resolved = this.pillRefLabels[key]
+					if (typeof resolved === 'string' && resolved !== '') {
+						return { ...pill, key, label: this.effectiveTranslate(resolved), colorKey: resolved }
+					}
+					return { ...pill, key, label: this.effectiveTranslate(pill.label) }
 				})
 				.filter(Boolean)
 		},
@@ -3396,6 +3428,34 @@ export default {
 		 * @return {string} The key.
 		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-header-pill-can-be-a-constant-or-a-count
 		 */
+		/**
+		 * What the resolved pills depend on, as one key: a change looks again.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/detail-pill-resolve/specs/detail-page/spec.md#requirement-a-header-pill-can-show-a-referenced-record-s-label
+		 */
+		pillResolveKey() {
+			return JSON.stringify(this.pillResolveTargets)
+		},
+
+		/**
+		 * The pills with `resolve: { register, schema, labelField? }` and the
+		 * id each one shows: `[key, register, schema, labelField, id]`. Empty
+		 * while the field is empty.
+		 *
+		 * @return {Array<Array<string>>}
+		 * @spec openspec/changes/detail-pill-resolve/specs/detail-page/spec.md#requirement-a-header-pill-can-show-a-referenced-record-s-label
+		 */
+		pillResolveTargets() {
+			return [['type', this.typePill], ['status', this.statusPill]]
+				.filter(([, config]) => config && config.resolve && config.resolve.register && config.resolve.schema && typeof config.field === 'string')
+				.map(([key, config]) => {
+					const pill = resolvePill({ field: config.field }, this.resolvedObject)
+					return pill ? [key, config.resolve.register, config.resolve.schema, config.resolve.labelField || '', pill.colorKey] : null
+				})
+				.filter(Boolean)
+		},
+
 		pillCountKey() {
 			return JSON.stringify([this.objectId, pillCountSource(this.typePill), pillCountSource(this.statusPill)])
 		},
@@ -3598,6 +3658,9 @@ export default {
 		 * @return {boolean}
 		 */
 		awaitingObject() {
+			if (this.hasRecordSourceFetch) {
+				return this.objectFetchPending && !this.currentObject
+			}
 			return this.hasSchemaDrivenFetch
 				&& this.objectFetchPending
 				&& typeof this.effectiveObjectStore?.fetchObject === 'function'
@@ -3671,7 +3734,45 @@ export default {
 		 * the fetch path entirely.
 		 */
 		hasSchemaDrivenFetch() {
-			return Boolean(this.register && this.schema && this.objectId)
+			return !this.entitySource && Boolean(this.register && this.schema && this.objectId)
+		},
+
+		/**
+		 * The record source named by `entitySource`, or null. An unknown name,
+		 * or a source that cannot read one record, is null with a warning.
+		 *
+		 * @return {object|null}
+		 */
+		recordSource() {
+			if (!this.entitySource) {
+				return null
+			}
+			try {
+				return resolveRecordSource(this.entitySource)
+			} catch (err) {
+				// eslint-disable-next-line no-console -- the console is the only channel a host app can read the detail on
+				console.warn('[CnDetailPage] the record source could not start; no record is shown.', err)
+				return null
+			}
+		},
+
+		/**
+		 * Whether the page reads its record through a record source.
+		 *
+		 * @return {boolean}
+		 */
+		hasRecordSourceFetch() {
+			return Boolean(this.recordSource && this.objectId)
+		},
+
+		/**
+		 * Whether the page reads its own record, from the object store or a
+		 * record source, so Refresh and `cn:page:refresh` have something to do.
+		 *
+		 * @return {boolean}
+		 */
+		selfFetchesRecord() {
+			return this.hasSchemaDrivenFetch || this.hasRecordSourceFetch
 		},
 
 		/**
@@ -3886,7 +3987,7 @@ export default {
 			}
 			// `$.vnode.props`, not `$attrs`: `refresh` is a declared emit, and
 			// Vue keeps declared emits out of `$attrs`.
-			return Boolean(this.$.vnode.props?.onRefresh) || this.hasSchemaDrivenFetch
+			return Boolean(this.$.vnode.props?.onRefresh) || this.selfFetchesRecord
 		},
 
 		/**
@@ -3930,6 +4031,9 @@ export default {
 		 * @return {object|null}
 		 */
 		currentObject() {
+			if (this.recordSource) {
+				return this.objectId ? (this.recordSource.record(this.objectId) ?? null) : null
+			}
 			const store = this.effectiveObjectStore
 			if (!store) {
 				return null
@@ -4605,6 +4709,14 @@ export default {
 			},
 		},
 
+		// A pill with `resolve` looks its record up again for another value.
+		pillResolveKey: {
+			immediate: true,
+			handler() {
+				this.refreshPillRefLabels()
+			},
+		},
+
 		// The header's count pills count again for another record or other lists.
 		pillCountKey: {
 			immediate: true,
@@ -5028,7 +5140,7 @@ export default {
 			// Schema-driven (manifest) detail pages self-fetch — without this
 			// the Refresh action has no host listener to act on and does
 			// nothing. Re-fetch the object + schema and spin the action.
-			if (!this.hasSchemaDrivenFetch) {
+			if (!this.selfFetchesRecord) {
 				return
 			}
 			this.internalRefreshing = true
@@ -5041,6 +5153,42 @@ export default {
 			}
 		},
 
+		/**
+		 * Look up the records the `resolve` pills point at, through the same
+		 * reference-label resolver the index tables use. A failed lookup keeps
+		 * the raw value.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/detail-pill-resolve/specs/detail-page/spec.md#requirement-a-header-pill-can-show-a-referenced-record-s-label
+		 */
+		async refreshPillRefLabels() {
+			const targets = this.pillResolveTargets
+			const seq = ++this.pillRefSeq
+			if (targets.length === 0) {
+				this.pillRefLabels = {}
+				return
+			}
+			if (!this._pillRefResolver) {
+				this._pillRefResolver = createRefLabelResolver(() => {
+					try {
+						return this.objectStore || useObjectStore()
+					} catch {
+						return null
+					}
+				})
+			}
+			const labels = {}
+			await Promise.all(targets.map(async ([key, register, schema, labelField, id]) => {
+				const found = await this._pillRefResolver.resolve(register, schema, [id], labelField).catch(() => ({}))
+				if (found && typeof found[id] === 'string') {
+					labels[key] = found[id]
+				}
+			}))
+			if (seq === this.pillRefSeq) {
+				this.pillRefLabels = labels
+			}
+		},
+
 		/**
 		 * Count the lists behind the header's count pills (`countFrom`): one
 		 * list request each (`_limit=1`, the `total`). A failed count, or a
@@ -5083,7 +5231,7 @@ export default {
 		 */
 		onPageRefreshBus(payload) {
 			this.refreshPillCounts()
-			if (!this.hasSchemaDrivenFetch) {
+			if (!this.selfFetchesRecord) {
 				return
 			}
 			if (this.internalRefreshing) {
@@ -5308,6 +5456,10 @@ export default {
 		},
 
 		async fetchObjectIfNeeded() {
+			if (this.recordSource) {
+				await this.fetchSourceRecord()
+				return
+			}
 			// Create archetype: no object to fetch, but the create form needs
 			// the schema — register the type and fetch its schema, then stop.
 			if (!this.hasSchemaDrivenFetch) {
@@ -5371,6 +5523,37 @@ export default {
 			}
 		},
 
+		/**
+		 * Read the record through the record source. A refusal (403) or a
+		 * missing record (404) shows the not-found state; which records the
+		 * viewer may read is the server's decision.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async fetchSourceRecord() {
+			const source = this.recordSource
+			const objectId = this.objectId
+			if (!objectId) {
+				this.objectFetchPending = false
+				return
+			}
+			this.objectFetchPending = true
+			this.objectNotFound = false
+			try {
+				await source.loadRecord(String(objectId))
+			} catch (err) {
+				// eslint-disable-next-line no-console -- the failure is already handled; the console is the only channel a host app can read the detail on
+				console.error('[CnDetailPage] record source fetch failed:', err)
+			} finally {
+				// A newer fetch for another id owns the flags now.
+				if (objectId === this.objectId) {
+					const status = typeof source.recordError === 'function' ? source.recordError(String(objectId)) : null
+					this.objectNotFound = !this.currentObject && (status === 403 || status === 404)
+					this.objectFetchPending = false
+				}
+			}
+		},
+
 		/**
 		 * Whether a grid-layout item resolves to an integration-typed
 		 * widget — `def.type === 'integration'` with a string

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -101,6 +101,28 @@
 						<span v-if="block.subtitle" class="cn-facts-widget__lead-subtitle">{{ block.subtitle }}</span>
 					</span>
 				</div>
+				<div
+					v-else-if="block.kind === 'meter'"
+					class="cn-facts-widget__meter"
+					:class="{ 'cn-facts-widget__meter--over': block.over }"
+					:data-testid="`cn-fact-${block.key}`">
+					<div class="cn-facts-widget__meter-head">
+						<span class="cn-facts-widget__meter-label">{{ block.label }}</span>
+						<span class="cn-facts-widget__meter-value">{{ block.value }}</span>
+					</div>
+					<div
+						v-if="block.limit !== null"
+						class="cn-facts-widget__meter-track"
+						role="meter"
+						:aria-label="block.label"
+						:aria-valuenow="block.amount"
+						aria-valuemin="0"
+						:aria-valuemax="block.limit"
+						:aria-valuetext="block.value"
+						:data-testid="`cn-fact-${block.key}-bar`">
+						<span class="cn-facts-widget__meter-bar" :style="{ width: `${block.percent}%` }" />
+					</div>
+				</div>
 				<div v-else-if="block.kind === 'pill'">
 					<CnStatusBadge
 						:label="block.value"
@@ -133,6 +155,7 @@
 
 <script>
 import { emit } from '@nextcloud/event-bus'
+import { formatFileSize } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
 import { NcLoadingIcon } from '@nextcloud/vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -152,7 +175,7 @@ import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveF
 import { userDisplayName } from '../../utils/userDisplayName.js'
 
 /** Kinds of entry a `fields[]` item can be. A labelled item without `as` is a row. */
-const KINDS = Object.freeze(['row', 'title', 'line', 'pill', 'lead', 'text'])
+const KINDS = Object.freeze(['row', 'title', 'line', 'pill', 'lead', 'text', 'meter'])
 
 /**
  * The label resolver every facts widget on the page shares, made on first use
@@ -260,13 +283,14 @@ export default {
 		 * The widget configuration.
 		 *
 		 * - `fields` — the entries, in order. Each is `{ path, label?, as?, from?, format?, map?, itemPath?, parts?, separator?, route?, variant?, variantMap?, colorMap?, icon?, copy?, reveal?, text?, title?, subtitle?, initialsPath?, tone? }`.
-		 *   `as` is `row` (default when `label` or `icon` is set), `title`, `line`, `text` (a line in the normal ink), `lead` (an icon tile or initials beside `title` and `subtitle`) or `pill`.
+		 *   `as` is `row` (default when `label` or `icon` is set), `title`, `line`, `text` (a line in the normal ink), `lead` (an icon tile or initials beside `title` and `subtitle`), `pill` or `meter`.
+		 *   A `meter` shows the amount at `path` against the limit at `limitPath` (or a constant `limit`) as "12 of 50" with a bar; past the limit the bar turns red and the text says "over the limit"; without a positive limit it shows the amount and no bar.
 		 *   A row's `format` may also be `email`, `phone` or `url` (a link) or `masked` (the last four characters; `reveal: true` adds Show). `copy: true` adds a copy button; `icon` replaces the label.
 		 *   A part may be `{ text }`, a constant; a `line` or `text` entry without `path` or `parts` shows its `text`.
 		 *   `resolve: { register, schema, labelField? }` on an entry or a part turns a value that is a reference (an id, or a list of ids) into the label of the referenced object (`labelField`, else `title`, then `name`): the case type or status of a task shows its name, not its uuid. The ids are fetched once per register and schema through the object store and shared by every facts widget on the page; the entry stays empty until its label is known, and when no label can be read. A resolved value works as a pill too: `map` is applied to the resolved label, and `variantMap` / `colorMap` look the tone up by the value of `resolve.toneField` on the referenced object when that is set (a status named by its `name`, coloured by its `state`), then by the resolved label, then by the stored value.
 		 *   `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.
 		 * - `action` — an action drawn as a button under the facts; `headerAction` — one drawn in the card header (reported through the `header` event).
-		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `list` (an array joined by ", ", each item read at `itemPath`) 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), `list` (an array joined by ", ", each item read at `itemPath`), `bytes` (a size, "1.5 MB") 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. An entry with `from: "object"` reads the current object even then (a client card that also shows the ticket's channel).
 		 * - `link` — `{ label, route? | href? }` at the foot.
@@ -420,6 +444,9 @@ export default {
 					block.initials = block.icon ? '' : this.initialsOf(readPath(record, field.initialsPath))
 					block.tone = ['success', 'info', 'warning', 'error'].includes(field.tone) ? field.tone : 'neutral'
 				}
+				if (kind === 'meter') {
+					Object.assign(block, this.meterOf(record, field))
+				}
 				if (kind === 'title' && field.route) {
 					block.to = this.resolveRoute(field.route, record)
 				}
@@ -546,6 +573,42 @@ export default {
 			return field.label || field.icon ? 'row' : 'line'
 		},
 
+		/**
+		 * A meter entry's parts: the amount at `path` against the limit at
+		 * `limitPath` (or a constant `limit`), both formatted with the entry's
+		 * `format`. Without a positive numeric limit there is no bar, only the
+		 * amount. Past the limit the text says so, so the state never rests on
+		 * the bar's colour alone.
+		 *
+		 * @param {object} record The object.
+		 * @param {object} field The entry.
+		 * @return {{label: string, value: string, amount: number|null, limit: number|null, percent: number, over: boolean}}
+		 * @spec openspec/changes/facts-meter-row/specs/facts-meter-row/spec.md#requirement-a-facts-entry-can-be-a-meter
+		 */
+		meterOf(record, field) {
+			const amount = Number(readPath(record, field.path))
+			const rawLimit = typeof field.limitPath === 'string' && field.limitPath !== '' ? readPath(record, field.limitPath) : field.limit
+			const limit = rawLimit === null || rawLimit === undefined || rawLimit === '' ? NaN : Number(rawLimit)
+			const label = this.tr(field.label || '')
+			const value = this.valueOf(record, field)
+			if (!Number.isFinite(amount) || !Number.isFinite(limit) || limit <= 0) {
+				return { label, value, amount: Number.isFinite(amount) ? amount : null, limit: null, percent: 0, over: false }
+			}
+			const over = amount > limit
+			const limitText = this.format(limit, field, record)
+			return {
+				label,
+				value: over
+					? t('nextcloud-vue', '{value} of {limit}, over the limit', { value, limit: limitText })
+					: t('nextcloud-vue', '{value} of {limit}', { value, limit: limitText }),
+
+				amount,
+				limit,
+				percent: Math.max(0, Math.min(100, (amount / limit) * 100)),
+				over,
+			}
+		},
+
 		/**
 		 * The display text of an entry of any kind: a lead's title, the parts of
 		 * a line or text, a constant `text`, else the value at `path`.
@@ -988,6 +1051,10 @@ export default {
 					? formatBoardDate(date, new Date(date.getFullYear() + 1, 0, 1))
 					: formatBoardDate(date)
 			}
+			if (format === 'bytes') {
+				const bytes = Number(raw)
+				return Number.isFinite(bytes) && bytes >= 0 ? formatFileSize(bytes) : ''
+			}
 			if (format === 'user') {
 				return userDisplayName(raw)
 			}
@@ -1125,6 +1192,50 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+.cn-facts-widget__meter {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	font-size: 14px;
+}
+
+.cn-facts-widget__meter-head {
+	display: flex;
+	justify-content: space-between;
+	gap: 16px;
+}
+
+.cn-facts-widget__meter-label {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-facts-widget__meter-value {
+	font-weight: 500;
+	text-align: end;
+}
+
+.cn-facts-widget__meter-track {
+	height: 6px;
+	border-radius: 3px;
+	background: var(--color-background-darker);
+	overflow: hidden;
+}
+
+.cn-facts-widget__meter-bar {
+	display: block;
+	height: 100%;
+	border-radius: inherit;
+	background: var(--color-primary-element);
+}
+
+.cn-facts-widget__meter--over .cn-facts-widget__meter-value {
+	color: var(--color-error-text);
+}
+
+.cn-facts-widget__meter--over .cn-facts-widget__meter-bar {
+	background: var(--color-error);
+}
+
 .cn-facts-widget__muted {
 	margin: 0;
 	color: var(--color-text-maxcontrast);

package/src/components/CnFeaturesAndRoadmapView/CnFeaturesAndRoadmapView.vue

@@ -223,8 +223,8 @@ export default {
 		/**
 		 * Board look options, passed to CnFeaturesBoard: `layout` (`cards` or
 		 * `rows`), `tabs`, `filter` (`chips` or `segmented`), `statusLabels`,
-		 * `next`, `issueLabels`, `subtitle`, `notice`, `documentationButton`
-		 * and `suggestButton`. Ignored in the default look.
+		 * `next`, `issueLabels`, `subtitle`, `notice`, `noticeLink`,
+		 * `summaries`, `documentationButton` and `suggestButton`. Ignored in the default look.
 		 *
 		 * @type {object}
 		 */
@@ -460,7 +460,7 @@ export default {
 		 * @return {object}
 		 */
 		boardOptions() {
-			const keys = ['layout', 'tabs', 'filter', 'statusLabels', 'next', 'issueLabels', 'subtitle', 'notice', 'documentationButton', 'suggestButton']
+			const keys = ['layout', 'tabs', 'filter', 'statusLabels', 'next', 'issueLabels', 'subtitle', 'notice', 'noticeLink', 'summaries', 'documentationButton', 'suggestButton']
 			const options = {}
 			for (const key of keys) {
 				if (this.board && this.board[key] !== undefined && this.board[key] !== null) {

package/src/components/CnFeaturesBoard/CnFeaturesBoard.vue

@@ -195,7 +195,7 @@
 									data-testid="cn-features-board-feature">
 									<span class="cn-features-board__row-text">
 										<span class="cn-features-board__row-title">{{ feature.title }}</span>
-										<span v-if="feature.summary" class="cn-features-board__row-summary">{{ feature.summary }}</span>
+										<span v-if="summaries && feature.summary" class="cn-features-board__row-summary">{{ feature.summary }}</span>
 									</span>
 									<CnStatusBadge
 										:label="statusText(feature)"
@@ -271,7 +271,16 @@
 					type="info"
 					class="cn-features-board__notice"
 					data-testid="cn-features-board-notice">
-					{{ tr(notice) }}
+					<template v-if="noticeParts.link">
+						{{ noticeParts.before }}<a
+							:href="noticeParts.link.href"
+							target="_blank"
+							rel="noopener noreferrer"
+							data-testid="cn-features-board-notice-link">{{ noticeParts.link.text }}</a>{{ noticeParts.after }}
+					</template>
+					<template v-else>
+						{{ noticeParts.before }}
+					</template>
 				</NcNoteCard>
 			</template>
 		</div>
@@ -397,6 +406,10 @@ export default {
 		suggestUrl: { type: String, default: '' },
 		/** Show the feature-request form as the header's primary button; without it, it is an entry in the Actions menu. */
 		suggestButton: { type: Boolean, default: true },
+		/** In the `rows` layout, draw each feature's summary under its title; false shows the title and status only. */
+		summaries: { type: Boolean, default: true },
+		/** A link inside the notice: `{ text, href }`; the first occurrence of `text` in the translated notice opens `href` in a new tab. Only http(s) and site-relative hrefs link. */
+		noticeLink: { type: Object, default: null },
 		/** Target of the OpenBuilt entry in the Actions menu. */
 		openbuiltUrl: { type: String, default: '' },
 		/** Target of the AI skills entry in the Actions menu. */
@@ -421,8 +434,10 @@ export default {
 			return readerLanguage()
 		},
 
+		/** The groups, their captions through the app's translate function. */
 		groups() {
 			return groupFeatures(this.features, this.categories, this.language)
+				.map((group) => ({ ...group, label: group.label ? this.tr(group.label) : '' }))
 		},
 
 		allFeatures() {
@@ -466,6 +481,27 @@ export default {
 			return this.title ? this.tr(this.title) : t('nextcloud-vue', 'Features and roadmap')
 		},
 
+		/**
+		 * The notice split around its link: the text before, the link and the
+		 * text after. Without a usable `noticeLink` (no match in the
+		 * translated notice, or an href that is not http(s) or site-relative)
+		 * `before` is the whole notice.
+		 *
+		 * @return {{before: string, link: ({text: string, href: string}|null), after: string}} The parts.
+		 */
+		noticeParts() {
+			const text = this.notice ? this.tr(this.notice) : ''
+			const link = this.noticeLink
+			const label = link && typeof link.text === 'string' ? this.tr(link.text) : ''
+			const href = link && typeof link.href === 'string' ? link.href.trim() : ''
+			const index = label ? text.indexOf(label) : -1
+			const allowed = (/^https?:\/\//i.test(href) || href.startsWith('/')) && safeHref(href) === href
+			if (index === -1 || !allowed) {
+				return { before: text, link: null, after: '' }
+			}
+			return { before: text.slice(0, index), link: { text: label, href }, after: text.slice(index + label.length) }
+		},
+
 		resolvedSubtitle() {
 			if (!this.subtitle) {
 				return ''