@conduction/nextcloud-vue 2.93.0 → 2.95.0

package/src/components/CnSettingsPage/CnSettingsPage.vue

@@ -47,6 +47,8 @@
 				:title="title"
 				:description="resolvedDescription"
 				:icon="icon"
+				:breadcrumb="breadcrumb"
+				:meta="headerMeta"
 				:visuallyHidden="!showTitle">
 				<!-- Board look: the buildiq square, then the page Save as the
 				     last header button. -->
@@ -475,6 +477,30 @@ export default {
 			default: () => t('nextcloud-vue', 'Settings'),
 		},
 
+		/**
+		 * A breadcrumb under the title (manifest `config.breadcrumb`): one
+		 * crumb `{ label, route?, params?, href?, icon?, separator? }` or a
+		 * list; the title follows as the current crumb. Drawn as the detail
+		 * header's breadcrumb row. Null (the default) draws none.
+		 *
+		 * @type {object|Array<object>|null}
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 */
+		breadcrumb: {
+			type: [Object, Array],
+			default: null,
+		},
+
+		/**
+		 * A note after the breadcrumb and a middle dot (manifest `config.headerMeta`).
+		 *
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 */
+		headerMeta: {
+			type: String,
+			default: '',
+		},
+
 		/** Description shown under the title when `showTitle` is set. */
 		description: {
 			type: String,

package/src/components/CnTabs/CnTabs.vue

@@ -263,6 +263,21 @@ export default defineComponent({
 			default: '',
 		},
 
+		/**
+		 * Leave the `overflow` tabs to the host's `#nav-end` menu instead of a
+		 * "More" menu of the strip's own. The strip then draws only the tabs
+		 * that are not `overflow`, and an overflow tab that is selected joins
+		 * it just before the last of them (board DqZaakBesluiten: Overview,
+		 * Files, Contact, Tasks, Decisions, History). The host lists the
+		 * overflow tabs and selects one through its `CnTab`'s `active`.
+		 *
+		 * @spec openspec/changes/board-tabs-overflow-in-actions/specs/board-tabs-overflow-in-actions/spec.md#requirement-board-tabs-list-their-overflow-in-the-actions-menu
+		 */
+		overflowInNavEnd: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Name of the menu that lists the `overflow` tabs. */
 		moreLabel: {
 			type: String,
@@ -377,14 +392,36 @@ export default defineComponent({
 		 *
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
 		 */
-		const visibleTabs = computed(() => tabs.filter((tab) => boardStrip.value || !tab.overflow || tab.uid === activeUid.value))
+		const visibleTabs = computed(() => {
+			if (props.overflowInNavEnd) {
+				return navEndStrip()
+			}
+			return tabs.filter((tab) => boardStrip.value || !tab.overflow || tab.uid === activeUid.value)
+		})
+
+		/**
+		 * The strip under `overflowInNavEnd`: the tabs that are not
+		 * `overflow`, with a selected overflow tab placed before the last.
+		 *
+		 * @return {object[]} The tabs to draw, in order.
+		 * @spec openspec/changes/board-tabs-overflow-in-actions/specs/board-tabs-overflow-in-actions/spec.md#requirement-an-opened-overflow-tab-joins-the-strip-before-the-last-tab
+		 */
+		function navEndStrip() {
+			const pinned = tabs.filter((tab) => !tab.overflow)
+			const opened = tabs.find((tab) => tab.overflow && tab.uid === activeUid.value)
+			if (!opened) {
+				return pinned
+			}
+			const at = Math.max(0, pinned.length - 1)
+			return [...pinned.slice(0, at), opened, ...pinned.slice(at)]
+		}
 
 		/**
 		 * The tabs listed under "More": overflow tabs that are not selected.
 		 *
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
 		 */
-		const overflowTabs = computed(() => (boardStrip.value ? [] : tabs.filter((tab) => tab.overflow && tab.uid !== activeUid.value)))
+		const overflowTabs = computed(() => (boardStrip.value || props.overflowInNavEnd ? [] : tabs.filter((tab) => tab.overflow && tab.uid !== activeUid.value)))
 
 		/**
 		 * Whether a tab declares a count. `0` is a count; null and '' are not.

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -9,6 +9,7 @@
 			:aria-label="stripLabel"
 			:moreLabel="moreLabel"
 			:variant="stripVariant"
+			:overflowInNavEnd="isBoard"
 			class="cn-tabs-widget__tabs"
 			@update:activeIndex="onTabChange">
 			<!-- One Actions menu for the whole widget, bound to whichever child
@@ -27,10 +28,11 @@
 					{{ cnTranslate(activeHeaderLink.label) }}
 				</component>
 				<CnActionsMenu
-					v-if="showActions"
-					:showRefresh="showRefresh"
-					:showRequestFeature="showRequestFeature"
-					:showDocumentation="showDocumentation"
+					v-if="showActions || menuTabs.length"
+					:showRefresh="showActions && showRefresh"
+					:showRequestFeature="showActions && showRequestFeature"
+					:showDocumentation="showActions && showDocumentation"
+					:showReportBug="showActions"
 					:documentationUrl="documentationUrl"
 					:widgetId="activeWidgetId"
 					:title="activeTitle"
@@ -38,6 +40,20 @@
 					:surface="`widget:${activeWidgetId}`"
 					refreshChannel="cn:widget:refresh"
 					testidBase="cn-tabs-widget">
+					<!-- Board look: the tabs that are not in the strip, at the
+					     top of the menu, in place of a "More" button. -->
+					<template v-if="menuTabs.length" #lead-items>
+						<NcActionButton
+							v-for="entry in menuTabs"
+							:key="entry.key"
+							:disabled="entry.pending || null"
+							:closeAfterClick="true"
+							data-testid="cn-tabs-widget-menu-tab"
+							@click="openMenuTab(entry)">
+							{{ menuTabLabel(entry) }}
+						</NcActionButton>
+						<NcActionSeparator v-if="showActions" />
+					</template>
 					<!-- The open panel's own items, below the built-in trio.
 					     A panel draws no header, so these would otherwise have
 					     nowhere to go: the data widget's Metadata and full edit
@@ -51,7 +67,7 @@
 					     tab mounted, so several panels publish at once and an
 					     unfiltered list would offer actions for a sheet nobody
 					     is looking at. -->
-					<template v-if="activePanelActions.length" #action-items>
+					<template v-if="showActions && activePanelActions.length" #action-items>
 						<NcActionButton
 							v-for="action in activePanelActions"
 							:key="action.key"
@@ -175,7 +191,7 @@
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translate as t } from '@nextcloud/l10n'
-import { NcActionButton, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcActionSeparator, NcLoadingIcon } from '@nextcloud/vue'
 import CnDetailWidgetHost from '../CnDetailWidgetHost/CnDetailWidgetHost.vue'
 import CnEmptyContent from '../CnEmptyContent/CnEmptyContent.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
@@ -184,6 +200,7 @@ import CnTabs from '../CnTabs/CnTabs.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { headerLinkTarget, widgetHeaderLink } from '../../utils/contentHeaderLink.js'
 import { resolveTabCount } from '../../utils/detailActionModel.js'
+import { detailWidgetVisible } from '../../utils/detailWidgetVisibility.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { isActivityWidget } from '../../utils/headerMeta.js'
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js'
@@ -251,6 +268,7 @@ export default {
 		CnTab,
 		CnTabs,
 		NcActionButton,
+		NcActionSeparator,
 		CnEmptyContent,
 		NcLoadingIcon,
 	},
@@ -364,7 +382,8 @@ export default {
 		 * `layout: [{ widgetId, gridWidth }]` sets a width (of 12) per widget, as
 		 * the page grid does. Widgets wrap onto the next row.
 		 *
-		 * `maxVisibleTabs` caps the strip: later tabs go under "More".
+		 * `maxVisibleTabs` caps the strip: later tabs go under "More" (in the
+		 * board look: into the Actions menu, with History kept in the strip).
 		 * `hideEmpty: true` moves a tab whose count is 0 there too.
 		 * `moreLabel` names that menu. `variant: "segmented"` draws the strip
 		 * as a pill switch (CnTabs' segmented variant); `line` is the default.
@@ -552,16 +571,34 @@ export default {
 			return [...(forId.host || []), ...(forId.widget || [])]
 		},
 
+		/**
+		 * The tabs the board look lists at the top of the Actions menu: the
+		 * overflow tabs, less the one that is open (it is in the strip).
+		 * Empty outside the board look, where CnTabs draws "More".
+		 *
+		 * @return {object[]} Resolved tabs, in strip order.
+		 * @spec openspec/changes/board-tabs-overflow-in-actions/specs/board-tabs-overflow-in-actions/spec.md#requirement-board-tabs-list-their-overflow-in-the-actions-menu
+		 */
+		menuTabs() {
+			if (!this.isBoard) {
+				return []
+			}
+			return this.resolvedTabs.filter((entry, index) => entry.overflow && index !== this.activeIndex)
+		},
+
 		/**
 		 * The configured tabs, each paired with the widget definition it names.
 		 *
 		 * A tab goes under the strip's "More" menu when it says `overflow`, when
 		 * `content.hideEmpty` is set and its count is 0, or when
 		 * `content.maxVisibleTabs` places are already taken. `count` is a
-		 * literal, or read off the record through `countField`.
+		 * literal, or read off the record through `countField`. In the board
+		 * look those tabs are listed in the Actions menu instead, and the
+		 * activity (History) tab always stays in the strip.
 		 *
 		 * @return {object[]} `{ key, widgetId, label, icon, widget, count, overflow }` per tab.
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-tab-counts-and-overflow
+		 * @spec openspec/changes/board-tabs-overflow-in-actions/specs/board-tabs-overflow-in-actions/spec.md#requirement-board-tabs-list-their-overflow-in-the-actions-menu
 		 */
 		resolvedTabs() {
 			const authored = Array.isArray(this.content?.tabs) ? this.content.tabs : []
@@ -580,9 +617,12 @@ export default {
 			const originalIndex = ordered.map(({ index }) => index)
 			const max = Number(this.content?.maxVisibleTabs)
 			const hideEmpty = this.content?.hideEmpty === true
+			// The board keeps its History tab in the strip, so it holds one of
+			// the `maxVisibleTabs` places from the start.
+			const pinActivity = this.isBoard && tabs.some((tab, position) => isActivityTab(tab) && this.tabVisibility(tab, originalIndex[position]) !== 'hidden')
 			// How many tabs have taken a place in the strip so far. A tab that
 			// is already going under "More" does not use one up.
-			let placed = 0
+			let placed = pinActivity ? 1 : 0
 			const resolved = []
 			tabs.forEach((tab, position) => {
 				const index = originalIndex[position]
@@ -596,7 +636,7 @@ export default {
 				const ids = this.tabWidgetIds(tab)
 				const widgets = ids.length > 1
 					? ids.map((id) => this.availableWidgets.find((w) => w && w.id === id) || null)
-							.filter((w) => w && !this.hiddenByWorkspace(w))
+							.filter((w) => w && !this.hiddenByWorkspace(w) && !this.hiddenByRecord(w))
 					: []
 				const widget = ids.length > 1
 					? (widgets[0] || null)
@@ -605,9 +645,9 @@ export default {
 				const declared = resolveTabCount(typeof tab === 'object' ? tab : null, this.objectData)
 				const counted = this.widgetCounts[index]
 				const count = declared === null && typeof counted === 'number' ? counted : declared
-				// The board strip has no "More": every tab is in the strip.
-				let overflow = !this.isBoard && ((tab && tab.overflow === true) || (hideEmpty && count === 0))
-				if (!overflow && !this.isBoard) {
+				const pinned = pinActivity && isActivityTab(tab)
+				let overflow = !pinned && ((tab && tab.overflow === true) || (hideEmpty && count === 0))
+				if (!overflow && !pinned) {
 					if (Number.isFinite(max) && max > 0 && placed >= max) {
 						overflow = true
 					} else {
@@ -868,6 +908,26 @@ export default {
 			return !evaluateWorkspaceCondition(cond, 'value' in bag ? bag.value : bag)
 		},
 
+		/**
+		 * Whether the record hides a widget of a stack on a detail page: its
+		 * own `visibleWhen` reads a field of the record or of a record the
+		 * page's `visibilityContext` names (`@context.<name>`), and does not
+		 * hold, as a grid widget's would not. Hidden while those records
+		 * load. Off a detail page (no record), and for a condition that needs
+		 * a request, nothing is hidden here.
+		 *
+		 * @param {object} widget The widget definition.
+		 * @return {boolean} True when the widget must not draw.
+		 * @spec openspec/changes/tab-stack-child-visible-when/specs/tab-stack-child-visible-when/spec.md#requirement-a-widget-in-a-tab-stack-on-a-detail-page-follows-its-own-condition
+		 */
+		hiddenByRecord(widget) {
+			const cond = widget.visibleWhen
+			if (!this.objectData || !cond || typeof cond !== 'object' || isWorkspaceCondition(cond) || !isLocallyDecidableVisibleWhen(cond)) {
+				return false
+			}
+			return !detailWidgetVisible(widget, this.conditionData)
+		},
+
 		/**
 		 * The grid a stack lays its widgets out in, as one column span (of 12)
 		 * per widget in order, or null for the plain vertical stack. A tab says
@@ -1139,6 +1199,39 @@ export default {
 			}
 		},
 
+		/**
+		 * Open a tab picked from the Actions menu, then move focus to it in
+		 * the strip, so a keyboard user lands on the tab they chose.
+		 *
+		 * @param {object} entry The resolved tab.
+		 * @return {void}
+		 * @spec openspec/changes/board-tabs-overflow-in-actions/specs/board-tabs-overflow-in-actions/spec.md#requirement-board-tabs-list-their-overflow-in-the-actions-menu
+		 */
+		openMenuTab(entry) {
+			const index = this.resolvedTabs.indexOf(entry)
+			if (index < 0) {
+				return
+			}
+			this.activeIndex = index
+			this.$nextTick(() => {
+				const button = this.$el?.querySelector?.('[role="tab"][aria-selected="true"]')
+				if (button && typeof button.focus === 'function') {
+					button.focus()
+				}
+			})
+		},
+
+		/**
+		 * A menu tab's text: its label, and its count when it has one.
+		 *
+		 * @param {object} entry The resolved tab.
+		 * @return {string} The menu label.
+		 */
+		menuTabLabel(entry) {
+			const hasCount = entry.count !== null && entry.count !== undefined && entry.count !== ''
+			return hasCount ? `${entry.label} (${entry.count})` : entry.label
+		},
+
 		/**
 		 * Empty-state text for a tab whose widget id resolves to nothing.
 		 *

package/src/components/CnVersionInfoCard/CnVersionInfoCard.vue

@@ -45,10 +45,11 @@
 						<span class="cn-version-info__value">{{ appVersion }}</span>
 					</div>
 
-					<!-- Configured Version (if provided) -->
-					<div v-if="configuredVersion" class="cn-version-info__item">
+					<!-- Configured version: when provided, and always in the board look,
+					     which draws the row ("Unknown" until the app reports it). -->
+					<div v-if="configuredVersion || isBoard" class="cn-version-info__item" data-testid="cn-version-info-configured">
 						<span class="cn-version-info__label">{{ fieldLabels.configuredVersion }}:</span>
-						<span class="cn-version-info__value">{{ configuredVersion }}</span>
+						<span class="cn-version-info__value">{{ configuredVersion || t('nextcloud-vue', 'Unknown') }}</span>
 					</div>
 
 					<!-- Additional items -->

package/src/components/CnWidgetGrid/registerDashboardWidgets.js

@@ -74,6 +74,7 @@ import '../CnFlowRunsWidget/index.js'
 import '../CnTasksWidget/index.js'
 import '../CnSectionsWidget/index.js'
 import '../CnFactsWidget/index.js'
+import '../CnDeviceFramesWidget/index.js'
 import '../CnFieldListWidget/index.js'
 import '../CnSettingsFormWidget/index.js'
 import '../CnSwitchRowsWidget/index.js'

package/src/components/CnWidgetWrapper/CnWidgetWrapper.md

@@ -177,3 +177,11 @@ Request a feature / Report a bug / Documentation render on every widget; the sha
 ### A text link in the header (`headerLink`)
 
 `headerLink` (`{ label, route?, params?, query?, href? }`) draws one text link in the header before the overflow menu, such as "All deadlines".
+
+Subtitle: `subtitle` is a muted line under the title, the counterpart of `eyebrow` above it:
+
+```vue
+<CnWidgetWrapper title="Op tijd beslist per zaaktype" subtitle="Dit kwartaal, beslist binnen de termijn">
+  <p>…</p>
+</CnWidgetWrapper>
+```

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -54,11 +54,14 @@
 					class="cn-widget-wrapper__icon" />
 				<!-- An eyebrow (`eyebrow`) is a muted line above the title:
 				     "Saldo per week" above "Prognose 13 weken". -->
-				<div v-if="resolvedEyebrow" class="cn-widget-wrapper__title-stack">
-					<span class="cn-widget-wrapper__eyebrow" data-testid="cn-widget-wrapper-eyebrow">{{ resolvedEyebrow }}</span>
+				<!-- A subtitle (`subtitle`) is a muted line under the title:
+				     "Dit kwartaal, beslist binnen de termijn". -->
+				<div v-if="resolvedEyebrow || resolvedSubtitle" class="cn-widget-wrapper__title-stack">
+					<span v-if="resolvedEyebrow" class="cn-widget-wrapper__eyebrow" data-testid="cn-widget-wrapper-eyebrow">{{ resolvedEyebrow }}</span>
 					<h3 :id="titleId" class="cn-widget-wrapper__title">
 						{{ resolvedTitle }}
 					</h3>
+					<span v-if="resolvedSubtitle" class="cn-widget-wrapper__subtitle" data-testid="cn-widget-wrapper-subtitle">{{ resolvedSubtitle }}</span>
 				</div>
 				<h3 v-else :id="titleId" class="cn-widget-wrapper__title">
 					{{ resolvedTitle }}
@@ -264,6 +267,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * A muted line under the title, such as the period a chart covers.
+		 * Run through the host translate function. Empty draws none.
+		 *
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-dashboard-widget-card-can-carry-a-line-under-its-title
+		 */
+		subtitle: {
+			type: String,
+			default: '',
+		},
+
 		/** Whether to show the header with title */
 		showTitle: {
 			type: Boolean,
@@ -733,6 +747,15 @@ export default {
 			return this.eyebrow ? this.effectiveTranslate(this.eyebrow) : ''
 		},
 
+		/**
+		 * The subtitle run through the host translate function.
+		 *
+		 * @return {string}
+		 */
+		resolvedSubtitle() {
+			return this.subtitle ? this.effectiveTranslate(this.subtitle) : ''
+		},
+
 		/**
 		 * The RENDERED widget title — `displayTitle` run through the host
 		 * translate function. Kept separate from `displayTitle` on purpose:
@@ -1175,6 +1198,12 @@ export default {
 	min-width: 0;
 }
 
+.cn-widget-wrapper__subtitle {
+	font-size: 13px;
+	line-height: 1.3;
+	color: var(--color-text-maxcontrast);
+}
+
 .cn-widget-wrapper__eyebrow {
 	font-size: 13px;
 	line-height: 1.3;

package/src/components/index.js

@@ -220,6 +220,7 @@ export { CnTasksWidget } from './CnTasksWidget/index.js'
 export { CnTasksWidgetForm } from './CnTasksWidgetForm/index.js'
 export { CnSectionsWidget } from './CnSectionsWidget/index.js'
 export { CnFactsWidget } from './CnFactsWidget/index.js'
+export { CnDeviceFramesWidget } from './CnDeviceFramesWidget/index.js'
 export { CnFieldListWidget } from './CnFieldListWidget/index.js'
 export { CnSettingsFormWidget } from './CnSettingsFormWidget/index.js'
 export { CnSwitchRowsWidget } from './CnSwitchRowsWidget/index.js'

package/src/composables/indexSources.js

@@ -267,6 +267,15 @@ function tasksSource() {
 		 */
 		loading: () => !!store.loading,
 
+		/**
+		 * Count the inbox for a config without touching the rows on screen,
+		 * for a quick-filter tab with `showCount`.
+		 *
+		 * @param {object} config The merged config, as for `load`.
+		 * @return {Promise<number>} The datastore total.
+		 */
+		count: async (config) => (await store.fetchFor({ ...(config || {}), limit: 1 })).total,
+
 		columns: [
 			{ key: 'title', label: t('nextcloud-vue', 'Task') },
 			{ key: 'subjectLabel', label: t('nextcloud-vue', 'Subject') },

package/src/css/dialog.css

@@ -250,3 +250,17 @@
 		min-height: 44px;
 	}
 }
+
+/* Above a phone the boards top-align a dialog (DqNieuweZaak, DqUwWachtrij,
+   DqVolgendeStap: the top edge sits about 90px down at 1440 wide) instead of
+   centring it. `--cn-dialog-top` moves it. */
+@media (min-width: 601px) {
+	.modal-mask.cn-dialog-board .modal-wrapper {
+		align-items: flex-start;
+	}
+
+	.modal-mask.cn-dialog-board .modal-wrapper .modal-container {
+		margin-top: var(--cn-dialog-top, 88px);
+		max-height: calc(100% - var(--cn-dialog-top, 88px) - 24px);
+	}
+}

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

@@ -481,10 +481,11 @@
 	border-radius: 0;
 }
 
+/* The header row is near-white on the boards (#fafbfc), not the hover grey. */
 .cn-look-board .cn-table-container--board .cn-data-table th {
 	padding: 12px 16px;
 	border-bottom: 0;
-	background: var(--color-background-hover);
+	background: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
 	color: var(--color-text-maxcontrast);
 	font-weight: 600;
 }
@@ -542,6 +543,15 @@
 	max-width: calc(100% - 26px);
 }
 
+/* The board's funnel: a 22px button 4px after the sort chevron. */
+.cn-look-board .cn-table-container--board .cn-data-table th .cn-table-header__filter {
+	width: 22px;
+	min-width: 22px;
+	height: 22px;
+	min-height: 22px;
+	margin-inline-start: 4px;
+}
+
 /* 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
@@ -747,6 +757,14 @@
 	padding: 0 12px;
 }
 
+/* The inert Next of a single page: a faint outline, muted text. */
+.cn-look-board .cn-pagination--board .cn-pagination__board-link--disabled {
+	display: inline-flex;
+	align-items: center;
+	color: var(--color-text-maxcontrast);
+	cursor: default;
+}
+
 .cn-look-board .cn-pagination--board .cn-pagination__board-link--current {
 	border-color: var(--color-primary-element);
 	background: var(--color-primary-element);
@@ -1028,3 +1046,11 @@
 	padding: 0 12px;
 	border-radius: 8px;
 }
+
+/* The sidebar's own open toggle (NcAppSidebar's `.app-sidebar__toggle`, drawn
+   when the sidebar is closed) sits over the content's top-right corner, which
+   on an index page is the primary header button: a stray dark square on
+   "New contact". The board draws none; the Filter button opens the sidebar. */
+.cn-look-board:has(.cn-index-page) > .app-sidebar__toggle {
+	display: none;
+}

package/src/css/look-board.css

@@ -624,6 +624,33 @@
 	opacity: 1 !important;
 }
 
+/* The support card at the end of an admin page (`supportPosition: "end"`,
+   board PqBeheer): one row, the title then the lines, wrapping in a narrow
+   window, with less padding than a settings card.
+   @spec openspec/changes/admin-shell-support-end/specs/settings-board-look/spec.md#requirement-support-can-be-its-own-card-at-the-end */
+.cn-look-board .settings-section.cn-admin-settings-shell__support:not(.cn-look-nextcloud *) {
+	flex-direction: row !important;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px 24px;
+	padding: 16px 24px;
+}
+
+.cn-look-board .cn-admin-settings-shell__support:not(.cn-look-nextcloud *) .settings-section__name {
+	font-size: 16px;
+}
+
+.cn-look-board .cn-admin-settings-shell__support:not(.cn-look-nextcloud *) .cn-settings-section__content {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px 24px;
+}
+
+.cn-look-board .cn-admin-settings-shell__support:not(.cn-look-nextcloud *) .cn-admin-settings-shell__support-line {
+	margin: 0;
+	font-size: 14px;
+}
+
 /* The section footer is the save row: the hairline replaces its own rule. */
 .cn-look-board .settings-section .cn-settings-section__footer {
 	margin: 0;

package/src/css/page-header.css

@@ -61,3 +61,19 @@
 	white-space: nowrap;
 	border: 0;
 }
+
+/* The breadcrumb and meta line under the title (CnHeaderTrail). In the board
+   look it takes the detail header row's styles; here it only lays the crumbs,
+   the dot and the note out on one line. */
+.cn-header-trail {
+	align-items: center;
+	color: var(--color-text-maxcontrast);
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--default-grid-baseline);
+	margin-bottom: var(--default-grid-baseline);
+}
+
+.cn-header-trail .cn-detail-page__breadcrumbs {
+	margin-bottom: 0;
+}

package/src/index.js

@@ -99,6 +99,7 @@ export {
 	CnDetailGrid,
 	CnDetailPage,
 	CnDetailWidgetHost,
+	CnDeviceFramesWidget,
 	CnDialog,
 	CnDialogHeader,
 	CnDividerWidget,