@conduction/nextcloud-vue 2.60.0 → 2.62.0

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 34515119 bytes
-sha256: 5f3fcfa87667eab7bfc0a4c99e86f6e46f2b136b344fa184d53d9e04aff4db7e
+size: 34658160 bytes
+sha256: 39b2808fa6e91c4a4c4e4dce5008a2efbcbb57754f60422fbac1771331bc070e

package/dist/nextcloud-vue.css

@@ -325,8 +325,7 @@
 	outline-offset: -2px;
 }
 
-/* Multi-column sort priority badge (1, 2, 3) — only rendered once more than
-   one sort key is active; a single active sort shows the arrow alone. */
+/* Multi-column sort priority badge (1, 2, 3), rendered only when two or more rendered, sortable columns are sorted. */
 .cn-table-sort-badge {
 	display: inline-flex;
 	align-items: center;
@@ -2660,9 +2659,17 @@
 	font-weight: 700;
 	line-height: 1.3;
 	color: var(--color-main-text);
-	white-space: nowrap;
+	/* Two lines, then an ellipsis. One line cut a long case title short on a
+	   page with room to spare, and the title is the one thing that says which
+	   record this is. The element carries the full text as its `title`, so a
+	   title cut after two lines is still reachable. `overflow-wrap` breaks a
+	   word longer than the line, which nowrap used to hide. */
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
 	overflow: hidden;
-	text-overflow: ellipsis;
+	overflow-wrap: anywhere;
 }
 
 .cn-detail-page__subtitle {
@@ -6352,8 +6359,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	outline-offset: -2px;
 }
 
-/* Multi-column sort priority badge (1, 2, 3) — only rendered once more than
-   one sort key is active; a single active sort shows the arrow alone. */
+/* Multi-column sort priority badge (1, 2, 3), rendered only when two or more rendered, sortable columns are sorted. */
 .cn-table-sort-badge {
 	display: inline-flex;
 	align-items: center;
@@ -17505,6 +17511,30 @@ to { background-position: -200% 0;
 	color: inherit;
 }
 
+/* The check failed. Muted text, no fill, no severity colour: it is a note
+   that something is not known, not a warning. */
+.cn-banner-widget--unchecked[data-v-3531692f] {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 8px 12px;
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+	cursor: help;
+}
+
+/* The reason, for assistive technology; sighted readers get the tooltip. */
+.cn-banner-widget__unchecked-reason[data-v-3531692f] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border: 0;
+}
+
 /* Attention card. The severity edge is an inset shadow, so it takes no width. */
 .cn-banner-widget--attention[data-v-3531692f] {
 	--cn-banner-accent: var(--color-primary-element);
@@ -31807,6 +31837,13 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 .cn-wiki-page__header[data-v-25a3d3cf] {
 	margin-bottom: 16px;
 }
+
+/* Without a sidebar the title starts at the left edge of the content, under
+   the Nextcloud navigation toggle button (44px wide). Clear it as CnPageHeader
+   does. With a sidebar the tree sits there instead and the title is clear. */
+.cn-wiki-page:not(.cn-wiki-page--has-sidebar) .cn-wiki-page__header[data-v-25a3d3cf] {
+	padding-inline-start: 56px;
+}
 .cn-wiki-page__title[data-v-25a3d3cf] {
 	font-size: 1.6em;
 	margin: 0;
@@ -31866,6 +31903,13 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 .cn-reports-page[data-v-41525752] {
 	padding: 16px;
 }
+
+/* Clear the Nextcloud navigation toggle button (44px wide, absolutely
+   positioned at the left edge of .app-content) plus 12px breathing room, as
+   CnPageHeader does. Only the header shifts; the body keeps the full width. */
+.cn-reports-page__header[data-v-41525752] {
+	padding-inline-start: 56px;
+}
 .cn-reports-page__title[data-v-41525752] {
 	margin: 0 0 4px;
 }
@@ -31922,6 +31966,13 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 	padding: 16px;
 	max-width: 1200px;
 }
+
+/* Clear the Nextcloud navigation toggle button (44px wide, absolutely
+   positioned at the left edge of .app-content) plus 12px breathing room, as
+   CnPageHeader does. Only the header shifts; the body keeps the full width. */
+.cn-store-page__header[data-v-25c8171b] {
+	padding-inline-start: 56px;
+}
 .cn-store-page__heading[data-v-25c8171b] {
 	display: flex;
 	flex-wrap: wrap;
@@ -32005,6 +32056,122 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 }
 
 
+.cn-link-cards-page[data-v-2f9a546b] {
+	display: flex;
+	flex-direction: column;
+	gap: calc(6 * var(--default-grid-baseline));
+	padding: calc(5 * var(--default-grid-baseline));
+}
+
+/* Clear the Nextcloud navigation toggle button (44px wide, absolutely
+   positioned at the left edge of .app-content) plus 12px breathing room, as
+   CnPageHeader does. Only the header shifts; the cards keep the full width. */
+.cn-link-cards-page__header[data-v-2f9a546b] {
+	padding-inline-start: 56px;
+}
+.cn-link-cards-page__title[data-v-2f9a546b] {
+	margin: 0 0 var(--default-grid-baseline);
+}
+.cn-link-cards-page__description[data-v-2f9a546b],
+.cn-link-cards-page__empty[data-v-2f9a546b] {
+	color: var(--color-text-maxcontrast);
+	margin: 0;
+	max-width: 70ch;
+}
+.cn-link-cards-page__group[data-v-2f9a546b] {
+	display: flex;
+	flex-direction: column;
+	gap: calc(3 * var(--default-grid-baseline));
+}
+.cn-link-cards-page__caption[data-v-2f9a546b] {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.85em;
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	margin: 0;
+	text-transform: uppercase;
+}
+.cn-link-cards-page__grid[data-v-2f9a546b] {
+	display: grid;
+	gap: calc(3 * var(--default-grid-baseline));
+	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+.cn-link-cards-page__cell[data-v-2f9a546b] {
+	display: flex;
+}
+.cn-link-cards-page__card[data-v-2f9a546b] {
+	align-items: flex-start;
+	background: var(--color-main-background);
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--border-radius-large);
+	color: var(--color-main-text);
+	display: flex;
+	flex: 1;
+	gap: calc(3 * var(--default-grid-baseline));
+	min-width: 0;
+	padding: calc(4 * var(--default-grid-baseline));
+	transition: background-color var(--animation-quick, 100ms) ease, border-color var(--animation-quick, 100ms) ease, box-shadow var(--animation-quick, 100ms) ease;
+}
+
+/* A card is a link, and it must not look like a line of prose. A theme may
+   underline every link with `!important` (thematiq: `a { text-decoration:
+   underline !important }`, specificity 0,0,1). Among `!important` rules the
+   higher specificity wins, so this class rule has to carry it too; without it
+   the label and the description both rendered underlined on a live Nextcloud. */
+.cn-link-cards-page__card[data-v-2f9a546b],
+.cn-link-cards-page__card[data-v-2f9a546b]:hover,
+.cn-link-cards-page__card[data-v-2f9a546b]:focus,
+.cn-link-cards-page__card[data-v-2f9a546b]:active {
+	text-decoration: none !important;
+}
+
+/* Hover moves the whole card: border, background and a soft lift. */
+.cn-link-cards-page__card[data-v-2f9a546b]:hover {
+	background: var(--color-background-hover);
+	border-color: var(--color-primary-element);
+	box-shadow: 0 2px 6px var(--color-box-shadow);
+}
+@media (prefers-reduced-motion: reduce) {
+.cn-link-cards-page__card[data-v-2f9a546b] {
+		transition: none;
+}
+}
+.cn-link-cards-page__card[data-v-2f9a546b]:focus-visible {
+	border-color: var(--color-primary-element);
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+.cn-link-cards-page__icon[data-v-2f9a546b] {
+	color: var(--color-primary-element);
+	flex: none;
+}
+.cn-link-cards-page__body[data-v-2f9a546b] {
+	display: flex;
+	flex-direction: column;
+	gap: var(--default-grid-baseline);
+	min-width: 0;
+}
+
+/* The label is the card's title. Its colour is set here, on the span, because
+   a theme may force its link colour on the `a` itself; an inherited link
+   colour made the title read as a hyperlink. */
+.cn-link-cards-page__label[data-v-2f9a546b] {
+	color: var(--color-main-text);
+	font-size: 1.05em;
+	font-weight: 700;
+	line-height: 1.3;
+	overflow-wrap: anywhere;
+}
+.cn-link-cards-page__card-description[data-v-2f9a546b] {
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+	line-height: 1.4;
+}
+
+
 /* NcDialog supplies the padding and the heading (via `name`); this div keeps only
    the body's own column layout. */
 .cn-page-config[data-v-9e9a9cf8] {
@@ -34218,15 +34385,40 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 
 
 .cn-brand-stripe[data-v-6fdfa763] {
+	--cn-brand-stripe-first: var(--cn-brand-stripe-ratio-1, 1);
+	--cn-brand-stripe-second: var(--cn-brand-stripe-ratio-2, 1);
+	--cn-brand-stripe-total: calc(
+		var(--cn-brand-stripe-first) + var(--cn-brand-stripe-second) + var(--cn-brand-stripe-ratio-3, 1)
+	);
+	--cn-brand-stripe-stop-1: calc(var(--cn-brand-stripe-first) / var(--cn-brand-stripe-total) * 100%);
+	--cn-brand-stripe-stop-2: calc(
+		(var(--cn-brand-stripe-first) + var(--cn-brand-stripe-second)) / var(--cn-brand-stripe-total) * 100%
+	);
+	--cn-brand-stripe-direction: to right;
+	--cn-brand-stripe-bands: linear-gradient(
+		var(--cn-brand-stripe-direction),
+		var(--cn-brand-stripe-color-1, var(--color-primary-element)) 0 var(--cn-brand-stripe-stop-1),
+		var(--cn-brand-stripe-color-2, var(--color-primary-element)) var(--cn-brand-stripe-stop-1) var(--cn-brand-stripe-stop-2),
+		var(--cn-brand-stripe-color-3, var(--color-primary-element)) var(--cn-brand-stripe-stop-2) 100%
+	);
 	display: flex;
 	flex: none;
 	width: 100%;
 	height: var(--cn-brand-stripe-height, 4px);
+	background-image: var(--cn-brand-stripe-image, var(--cn-brand-stripe-bands));
+	background-repeat: repeat-x;
+	background-size: auto 100%;
+}
+.cn-brand-stripe--inverse[data-v-6fdfa763] {
+	background-image: var(--cn-brand-stripe-image-inverse, var(--cn-brand-stripe-image, var(--cn-brand-stripe-bands)));
 }
 .cn-brand-stripe--vertical[data-v-6fdfa763] {
+	--cn-brand-stripe-direction: to bottom;
 	flex-direction: column;
 	width: var(--cn-brand-stripe-height, 4px);
 	height: 100%;
+	background-repeat: repeat-y;
+	background-size: 100% auto;
 }
 .cn-brand-stripe__band[data-v-6fdfa763] {
 	flex-basis: 0;
@@ -34234,15 +34426,12 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 }
 .cn-brand-stripe__band--1[data-v-6fdfa763] {
 	flex-grow: var(--cn-brand-stripe-ratio-1, 1);
-	background-color: var(--cn-brand-stripe-color-1, var(--color-primary-element));
 }
 .cn-brand-stripe__band--2[data-v-6fdfa763] {
 	flex-grow: var(--cn-brand-stripe-ratio-2, 1);
-	background-color: var(--cn-brand-stripe-color-2, var(--color-primary-element));
 }
 .cn-brand-stripe__band--3[data-v-6fdfa763] {
 	flex-grow: var(--cn-brand-stripe-ratio-3, 1);
-	background-color: var(--cn-brand-stripe-color-3, var(--color-primary-element));
 }
 @media print {
 .cn-brand-stripe[data-v-6fdfa763] {

package/l10n/en.json

@@ -294,6 +294,11 @@
     "JSON pointer": "JSON pointer",
     "Last": "Last",
     "Load more": "Load more",
+    "Nothing to open here.": "Nothing to open here.",
+    "Could not check": "Could not check",
+    "Could not check: {subject}": "Could not check: {subject}",
+    "The check failed.": "The check failed.",
+    "The check failed: {reason}": "The check failed: {reason}",
     "To do": "To do",
     "Next step": "Next step",
     "Review": "Review",
@@ -621,6 +626,7 @@
     "No linked emails yet": "No linked emails yet",
     "Could not load emails": "Could not load emails",
     "Open in Mail": "Open in Mail",
+    "Open in Office": "Open in Office",
     "(no subject)": "(no subject)",
     "Unknown sender": "Unknown sender",
     "No conversations linked yet": "No conversations linked yet",

package/l10n/nl.json

@@ -294,6 +294,11 @@
     "JSON pointer": "JSON-aanwijzer",
     "Last": "Laatste",
     "Load more": "Meer laden",
+    "Nothing to open here.": "Hier is niets te openen.",
+    "Could not check": "Kon niet controleren",
+    "Could not check: {subject}": "Kon niet controleren: {subject}",
+    "The check failed.": "De controle is mislukt.",
+    "The check failed: {reason}": "De controle is mislukt: {reason}",
     "To do": "Nog doen",
     "Next step": "Volgende stap",
     "Review": "Beoordelen",
@@ -613,6 +618,7 @@
     "No linked emails yet": "Nog geen gekoppelde e-mails",
     "Could not load emails": "Kon e-mails niet laden",
     "Open in Mail": "Openen in Mail",
+    "Open in Office": "Openen in Office",
     "(no subject)": "(geen onderwerp)",
     "Unknown sender": "Onbekende afzender",
     "No conversations linked yet": "Nog geen gesprekken gekoppeld",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.60.0",
+  "version": "2.62.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": {
@@ -94,7 +94,8 @@
     "test": "jest",
     "test:e2e": "playwright test",
     "test:types": "tsd",
-    "update:manifest-fixtures": "node scripts/update-fleet-manifest-fixtures.js"
+    "update:manifest-fixtures": "node scripts/update-fleet-manifest-fixtures.js",
+    "update:manifest-schema-hash": "node scripts/record-manifest-schema-hash.js"
   },
   "overrides": {
     "@vue/vue3-jest": {

package/scripts/.jsdoc-baselines.json

@@ -130,6 +130,7 @@
   "CnLifecycleActions": 1,
   "CnLinkButtonWidget": 1,
   "CnLinkButtonWidgetForm": 1,
+  "CnLinkCardsPage": 1,
   "CnLinksWidget": 1,
   "CnLinksWidgetForm": 1,
   "CnLockedBanner": 1,

package/scripts/manifest-schema-hash.js

@@ -0,0 +1,41 @@
+/**
+ * SPDX-License-Identifier: EUPL-1.2
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ *
+ * The content hash of the v2 manifest schema, shared by the recording script
+ * (`record-manifest-schema-hash.js`) and the test that checks it
+ * (`tests/schemas/app-manifest-v2.schema-version.spec.js`).
+ */
+
+const crypto = require('crypto')
+const fs = require('fs')
+const path = require('path')
+
+const ROOT = path.resolve(__dirname, '..')
+const SCHEMA_PATH = path.join(ROOT, 'src/schemas/app-manifest-v2.schema.json')
+const LEDGER_PATH = path.join(ROOT, 'tests/schemas/app-manifest-v2.schema.hashes.json')
+
+/**
+ * Hash a parsed schema. The hash is over the parsed document written back
+ * without whitespace, so reformatting the file is not a content change while
+ * any key, value or ordering change is. `version` is part of the content.
+ *
+ * @param {object} schema The parsed schema.
+ * @return {string} `sha256:<hex>`.
+ * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-the-manifest-schema-version-moves-with-its-content
+ */
+function hashSchema(schema) {
+	return 'sha256:' + crypto.createHash('sha256').update(JSON.stringify(schema)).digest('hex')
+}
+
+/**
+ * Read the ledger of recorded versions.
+ *
+ * @return {{versions: Record<string, string>}} The ledger.
+ * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-the-manifest-schema-version-moves-with-its-content
+ */
+function readLedger() {
+	return JSON.parse(fs.readFileSync(LEDGER_PATH, 'utf8'))
+}
+
+module.exports = { SCHEMA_PATH, LEDGER_PATH, hashSchema, readLedger }

package/scripts/record-manifest-schema-hash.js

@@ -0,0 +1,52 @@
+/**
+ * SPDX-License-Identifier: EUPL-1.2
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ *
+ * Records the content hash of `src/schemas/app-manifest-v2.schema.json` under
+ * its current `version` in `tests/schemas/app-manifest-v2.schema.hashes.json`
+ * (`npm run update:manifest-schema-hash`).
+ *
+ * Why a ledger. The schema's `version` is the only machine-readable signal a
+ * consumer gets that the vocabulary moved: ConductionNL/.github vendors this
+ * file into the gate tooling and compares versions to decide whether its copy
+ * is stale. 2.61.0 shipped a new page type under an unchanged 2.42.0, so that
+ * comparison read "already current" against a schema that had moved. The
+ * ledger makes that state fail a test here instead: a version has one content
+ * hash, so changing the content means taking a new version.
+ *
+ * This script therefore REFUSES to replace the hash of a version that is
+ * already recorded. Bump `version` in the schema first, then run it.
+ *
+ * The hash and the ledger shape live in `manifest-schema-hash.js`, which the
+ * test requires too, so the two cannot disagree about what "content" means.
+ */
+
+const fs = require('fs')
+const { SCHEMA_PATH, LEDGER_PATH, hashSchema, readLedger } = require('./manifest-schema-hash.js')
+
+const schema = JSON.parse(fs.readFileSync(SCHEMA_PATH, 'utf8'))
+const version = schema.version
+if (typeof version !== 'string' || version === '') {
+	console.error(`${SCHEMA_PATH} has no "version". Nothing to record.`)
+	process.exit(1)
+}
+
+const ledger = readLedger()
+const hash = hashSchema(schema)
+const recorded = ledger.versions[version]
+
+if (recorded === hash) {
+	console.log(`Version ${version} is already recorded with this content. Nothing to do.`)
+	process.exit(0)
+}
+if (recorded !== undefined) {
+	const message = `Version ${version} is already recorded with different content.\n`
+		+ 'A version has one content. Bump "version" in the schema (minor for an\n'
+		+ 'additive change), then run this script again.'
+	console.error(message)
+	process.exit(1)
+}
+
+ledger.versions[version] = hash
+fs.writeFileSync(LEDGER_PATH, JSON.stringify(ledger, null, '\t') + '\n')
+console.log(`Recorded ${version} = ${hash}`)

package/src/components/CnAppNav/CnAppNav.vue

@@ -346,6 +346,7 @@
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcAppNavigation, NcAppNavigationCaption, NcAppNavigationItem, NcAppNavigationList, NcAppNavigationNew, NcAppNavigationSettings, NcButton, NcCounterBubble } from '@nextcloud/vue'
+import { toRaw } from 'vue'
 import BookOpenVariant from 'vue-material-design-icons/BookOpenVariant.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 // ADR-077 rule 4: visible fallback for an unresolvable icon name.
@@ -576,6 +577,13 @@ export default {
 
 	emits: ['primary-action', 'primary-action-click'],
 
+	/**
+	 * The navigation's own state: which groups are open, and which entry
+	 * of a route the reader last used.
+	 *
+	 * @return {object} The state.
+	 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-a-page-below-a-list-marks-one-menu-entry
+	 */
 	data() {
 		return {
 			/**
@@ -589,6 +597,15 @@ export default {
 			 */
 			openState: {},
 
+			/**
+			 * Per route name, the key of the entry that was last active on
+			 * that route in this session. Read by `subRouteParent` to keep
+			 * "the list I came from" marked on a page below it. In memory
+			 * only: a reload starts empty and falls back to menu order.
+			 *
+			 * @type {Record<string, string>}
+			 */
+			lastActiveEntryByRoute: {},
 		}
 	},
 
@@ -946,6 +963,67 @@ export default {
 			}
 			return best ?? routeName ?? null
 		},
+
+		/**
+		 * Every visible entry and child, flat, in menu order.
+		 *
+		 * @return {Array<object>} The entries.
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-a-page-below-a-list-marks-one-menu-entry
+		 */
+		flatEntries() {
+			const flat = []
+			for (const item of this.visibleItems) {
+				flat.push(item, ...this.visibleChildren(item))
+			}
+			return flat
+		},
+
+		/**
+		 * The entry the query rule marks while the reader is on a menu
+		 * route itself (not on a page below it). Watched, so the nav can
+		 * remember which entry of a route the reader last used.
+		 *
+		 * @return {object|null} The entry, or null on a page below a route.
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-a-page-below-a-list-marks-one-menu-entry
+		 */
+		entryActiveOnOwnRoute() {
+			const routeName = this.$route?.name
+			if (!routeName || routeName !== this.activeRouteName) {
+				return null
+			}
+			return this.flatEntries.find((entry) => this.isActiveByRule(entry)) ?? null
+		},
+
+		/**
+		 * The one entry to mark on a page BELOW a menu route when the query
+		 * rule marks none.
+		 *
+		 * On a detail page (`/cases/123`) the active route is found by path
+		 * prefix, and the address carries the detail page's query, not the
+		 * list's. When every entry on that list has a `query` ("My work",
+		 * "Queue"), none of them matched and the menu showed no place at
+		 * all. Marking all of them is the defect the query rule ended, so
+		 * this picks exactly one: the entry the reader last had active on
+		 * that route, else the first in menu order.
+		 *
+		 * Null whenever the existing rule already marks an entry, so a list
+		 * with an entry without a `query` behaves as it did.
+		 *
+		 * @return {object|null} The entry to mark, or null.
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-a-page-below-a-list-marks-one-menu-entry
+		 */
+		subRouteParent() {
+			const active = this.activeRouteName
+			if (!active || this.$route?.name === active) {
+				return null
+			}
+			const entries = this.flatEntries.filter((entry) => !entry.href && entry.route === active)
+			if (entries.length === 0 || entries.some((entry) => this.isActiveByRule(entry))) {
+				return null
+			}
+			const remembered = this.lastActiveEntryByRoute[active]
+			return entries.find((entry) => this.entryKey(entry) === remembered) ?? entries[0]
+		},
 	},
 
 	watch: {
@@ -960,6 +1038,23 @@ export default {
 		visibleItems() {
 			this.pinGroupsEntered(this.activeRouteName)
 		},
+
+		entryActiveOnOwnRoute: {
+			immediate: true,
+			/**
+			 * Remember which entry of a route the reader used, for
+			 * `subRouteParent`.
+			 *
+			 * @param {object|null} entry The entry active on its own route.
+			 * @return {void}
+			 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-a-page-below-a-list-marks-one-menu-entry
+			 */
+			handler(entry) {
+				if (entry && entry.route) {
+					this.lastActiveEntryByRoute[entry.route] = this.entryKey(entry)
+				}
+			},
+		},
 	},
 
 	created() {
@@ -1184,11 +1279,84 @@ export default {
 			return this.effectiveTranslate(item.label)
 		},
 
+		/**
+		 * Whether a menu entry is the page the reader is on.
+		 *
+		 * Two entries may share a route and differ only in `query` ("My
+		 * work" and "Queue" on one list). The route name alone lit both. An
+		 * entry with a `query` is active only when the address carries that
+		 * query; an entry without one steps back when a sibling's query
+		 * matches, so exactly one of them is marked.
+		 *
+		 * On a page below a list where that rule marks nothing, the one
+		 * entry `subRouteParent` picks is active instead.
+		 *
+		 * @param {object} item Menu entry.
+		 * @return {boolean} True when the entry is the current page.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-menu-entries-that-differ-in-query
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-a-page-below-a-list-marks-one-menu-entry
+		 */
 		isActive(item) {
+			if (this.isActiveByRule(item)) {
+				return true
+			}
+			const parent = this.subRouteParent
+			return parent !== null && toRaw(parent) === toRaw(item)
+		},
+
+		/**
+		 * The route and query rule on its own, without the fallback for a
+		 * page below a list. `subRouteParent` asks this to see whether the
+		 * rule already marks an entry.
+		 *
+		 * @param {object} item Menu entry.
+		 * @return {boolean} True when the rule marks the entry.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-menu-entries-that-differ-in-query
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-a-page-below-a-list-marks-one-menu-entry
+		 */
+		isActiveByRule(item) {
 			if (item.href || !item.route) {
 				return false
 			}
-			return item.route === this.activeRouteName
+			if (item.route !== this.activeRouteName) {
+				return false
+			}
+			if (item.query && typeof item.query === 'object') {
+				return this.queryMatches(item)
+			}
+			const siblings = []
+			for (const entry of this.visibleItems) {
+				siblings.push(entry, ...this.visibleChildren(entry))
+			}
+			return !siblings.some((entry) => entry !== item
+				&& entry.route === item.route
+				&& entry.query && typeof entry.query === 'object'
+				&& this.queryMatches(entry))
+		},
+
+		/**
+		 * What an entry is remembered by: its `id`, else its label.
+		 *
+		 * @param {object} item Menu entry.
+		 * @return {string} The key.
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-a-page-below-a-list-marks-one-menu-entry
+		 */
+		entryKey(item) {
+			return String(item.id ?? item.label ?? '')
+		},
+
+		/**
+		 * Whether the address carries every key of an entry's `query`.
+		 * Values are compared as strings, since an address has no numbers.
+		 *
+		 * @param {object} item Menu entry with a `query`.
+		 * @return {boolean} True when every declared key matches.
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-menu-entries-that-differ-in-query
+		 */
+		queryMatches(item) {
+			const current = this.$route?.query ?? {}
+			const keys = Object.keys(item.query)
+			return keys.length > 0 && keys.every((key) => String(current[key] ?? '') === String(item.query[key]))
 		},
 
 		/**