@conduction/nextcloud-vue 2.92.0 → 2.93.0

package/src/components/CnNcWidgetWidget/CnNcWidgetWidget.vue

@@ -5,7 +5,7 @@
 
 <template>
 	<div class="cn-nc-widget-widget" :class="{ 'cn-nc-widget-widget--horizontal': displayMode === 'horizontal' }">
-		<header class="cn-nc-widget-widget__header">
+		<header v-if="showsHeader" class="cn-nc-widget-widget__header" data-testid="cn-nc-widget-header">
 			<img
 				v-if="widgetIconUrl"
 				class="cn-nc-widget-widget__header-icon"
@@ -130,9 +130,16 @@ function getDashboardGlobal() {
 export default {
 	name: 'CnNcWidgetWidget',
 
+	inject: {
+		/** Whether the hosting card draws a title row (CnWidgetWrapper). */
+		cnWidgetTitled: { default: null },
+	},
+
 	props: {
 		/**
-		 * Persisted widget content `{widgetId, displayMode, limit?, showAllUrl?, showAllLabel?}`.
+		 * Persisted widget content `{widgetId, displayMode, limit?, showAllUrl?, showAllLabel?, showHeader?}`.
+		 * `showHeader: false` drops the widget's own header (icon and title);
+		 * it is dropped too when the hosting card draws a title row.
 		 * `limit` is the most items shown (the list then comes from the items
 		 * API, so it fits its cell); `showAllUrl` / `showAllLabel` the link to
 		 * the rest (default the widget's own page and "Show all").
@@ -207,6 +214,20 @@ export default {
 			return null
 		},
 
+		/**
+		 * Whether the widget draws its own header: not with
+		 * `content.showHeader: false`, nor inside a card that draws a title.
+		 *
+		 * @spec openspec/changes/nc-widget-header/specs/nc-widget-header/spec.md#requirement-a-nextcloud-widget-draws-no-second-heading
+		 * @return {boolean}
+		 */
+		showsHeader() {
+			if (this.content && this.content.showHeader === false) {
+				return false
+			}
+			return !(typeof this.cnWidgetTitled === 'function' && this.cnWidgetTitled())
+		},
+
 		/**
 		 * The header title.
 		 *

package/src/components/CnNotificationPreferences/CnNotificationPreferences.vue

@@ -1,5 +1,8 @@
 <template>
 	<NcAppSettingsSection id="notifications" :name="t('nextcloud-vue', 'Notifications')">
+		<template v-if="cnLook === 'board'" #icon>
+			<BellOutline :size="18" />
+		</template>
 		<NcLoadingIcon v-if="loading" :size="24" />
 
 		<NcEmptyContent v-else-if="error"
@@ -107,6 +110,8 @@ export default {
 		 * than an always-empty pane.
 		 */
 		cnAppId: { default: () => '' },
+		/** The app's look; `board` gives the section its navigation icon. */
+		cnLook: { default: 'nextcloud' },
 		/**
 		 * App-supplied labels for its notification rules, provided by the
 		 * CnAppRoot ancestor from its `notificationLabels` prop. Keyed

package/src/components/CnRoadmapTab/CnRoadmapTab.vue

@@ -69,9 +69,7 @@
  *
  * Spec: features-roadmap-component — Requirement "RoadmapTab".
  */
-import axios from '@nextcloud/axios'
 import { translate as t } from '@nextcloud/l10n'
-import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import ClockOutline from 'vue-material-design-icons/ClockOutline.vue'
@@ -79,6 +77,7 @@ import InformationOutline from 'vue-material-design-icons/InformationOutline.vue
 import KeyOutline from 'vue-material-design-icons/KeyOutline.vue'
 import RoadVariant from 'vue-material-design-icons/RoadVariant.vue'
 import CnRoadmapItem from '../CnRoadmapItem/CnRoadmapItem.vue'
+import { fetchRoadmapIssues, sortByReactions } from '../../utils/roadmapIssues.js'
 
 export default {
 	name: 'CnRoadmapTab',
@@ -124,7 +123,7 @@ export default {
 
 	computed: {
 		sortedItems() {
-			return [...this.items].sort((a, b) => (b.reactions?.total_count || 0) - (a.reactions?.total_count || 0))
+			return sortByReactions(this.items)
 		},
 
 		disabledLabel() {
@@ -175,31 +174,10 @@ export default {
 			this.loading = true
 			this.degraded = null
 			this.items = []
-			try {
-				const url = generateUrl('/apps/openregister/api/github/issues')
-				const response = await axios.get(url, {
-					params: {
-						repo: this.repo,
-						labels: 'enhancement,feature',
-					},
-				})
-				const data = response.data || {}
-				if (data.hint === 'github_pat_not_configured') {
-					this.degraded = 'pat_not_configured'
-				} else if (Array.isArray(data.items)) {
-					this.items = data.items
-				}
-			} catch (e) {
-				const status = e?.response?.status
-				const code = e?.response?.data?.error
-				if (status === 429 || code === 'github_rate_limited' || code === 'rate_limited') {
-					this.degraded = 'rate_limited'
-				} else {
-					this.degraded = 'error'
-				}
-			} finally {
-				this.loading = false
-			}
+			const { items, degraded } = await fetchRoadmapIssues(this.repo)
+			this.items = items
+			this.degraded = degraded
+			this.loading = false
 		},
 	},
 }

package/src/components/CnUserSettingsDialog/CnUserSettingsDialog.vue

@@ -0,0 +1,305 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<CnDialog
+		class="cn-user-settings-dialog"
+		:name="title"
+		look="board"
+		width="wizard"
+		:eyebrow="eyebrow"
+		:subtitle="subtitle"
+		:open="open"
+		:style="eyebrowStyle"
+		data-testid="cn-user-settings-dialog"
+		@update:open="onUpdateOpen"
+		@closing="close">
+		<div class="cn-user-settings-dialog__body">
+			<nav
+				v-if="sections.length > 0"
+				class="cn-user-settings-dialog__nav"
+				:aria-label="navLabel"
+				data-testid="cn-user-settings-nav">
+				<ul>
+					<li v-for="section in sections" :key="section.id">
+						<a
+							:href="`#settings-section_${section.id}`"
+							class="cn-user-settings-dialog__nav-link"
+							:class="{ 'cn-user-settings-dialog__nav-link--active': section.id === selected }"
+							:aria-current="section.id === selected ? 'true' : undefined"
+							:data-testid="`cn-user-settings-nav-${section.id}`"
+							@click.prevent="selectSection(section.id)">
+							<span v-if="section.icon" class="cn-user-settings-dialog__nav-icon" aria-hidden="true">
+								<CnVNodes :vnodes="section.icon" />
+							</span>
+							<span>{{ section.name }}</span>
+						</a>
+					</li>
+				</ul>
+			</nav>
+			<div class="cn-user-settings-dialog__sections">
+				<!-- @slot default NcAppSettingsSection children; each registers itself in the navigation. -->
+				<slot />
+			</div>
+		</div>
+		<template #actions>
+			<p class="cn-user-settings-dialog__note" data-testid="cn-user-settings-note">
+				{{ footerNote }}
+			</p>
+			<NcButton variant="secondary" data-testid="cn-user-settings-close" @click="close">
+				{{ closeLabel }}
+			</NcButton>
+		</template>
+	</CnDialog>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcButton } from '@nextcloud/vue'
+import { markRaw } from 'vue'
+import CnDialog from '../CnDialog/CnDialog.vue'
+
+/**
+ * The key NcAppSettingsSection injects to register itself with its dialog
+ * (`Symbol.for`, so the same symbol `@nextcloud/vue` provides).
+ */
+const REGISTRATION_KEY = Symbol.for('NcAppSettingsDialog:registration')
+
+/** Renders a section's icon vnodes as they were registered. */
+const CnVNodes = {
+	name: 'CnVNodes',
+	props: { vnodes: { type: [Array, Object], default: null } },
+	render() {
+		return this.vnodes
+	},
+}
+
+/**
+ * CnUserSettingsDialog - the user settings dialog in the board look (board
+ * PqPersoonlijk): eyebrow, title and subtitle, a left navigation listing the
+ * sections with their icons, the sections themselves, and a footer with a
+ * note that changes save straight away and a Close button.
+ *
+ * The sections stay the app's: any `NcAppSettingsSection` in the default slot
+ * registers itself with this dialog exactly as it does with
+ * `NcAppSettingsDialog`, with its name, order and `#icon` slot. CnAppRoot
+ * renders this dialog instead of `NcAppSettingsDialog` under the board look.
+ *
+ * @spec openspec/changes/user-settings-board-dialog/specs/user-settings-board-dialog/spec.md#requirement-the-user-settings-dialog-takes-the-board-look
+ *
+ * @event update:open Emitted with `false` when the dialog closes.
+ */
+export default {
+	name: 'CnUserSettingsDialog',
+
+	components: { CnDialog, CnVNodes, NcButton },
+
+	provide() {
+		return {
+			[REGISTRATION_KEY]: {
+				registerSection: this.registerSection,
+				unregisterSection: this.unregisterSection,
+			},
+		}
+	},
+
+	props: {
+		/** Whether the dialog is open. */
+		open: { type: Boolean, default: false },
+		/** Dialog title; also its accessible name. */
+		title: { type: String, required: true },
+		/** Context line above the title. */
+		eyebrow: { type: String, default: () => t('nextcloud-vue', 'Your account') },
+		/** Sentence under the title. */
+		subtitle: { type: String, default: () => t('nextcloud-vue', 'Only for you. Colleagues keep their own settings.') },
+		/** The app's name, after the footer note. */
+		appName: { type: String, default: '' },
+	},
+
+	emits: ['update:open'],
+
+	data() {
+		return {
+			sections: [],
+			selected: '',
+			picked: false,
+		}
+	},
+
+	computed: {
+		/** @return {object} The board's eyebrow: muted, in sentence case. */
+		eyebrowStyle() {
+			return { '--cn-dialog-eyebrow-transform': 'none', '--cn-dialog-eyebrow-color': 'var(--color-text-maxcontrast)' }
+		},
+
+		/** @return {string} The navigation's accessible name. */
+		navLabel() {
+			return t('nextcloud-vue', 'Sections of the settings')
+		},
+
+		/** @return {string} The footer note, with the app's name when known. */
+		footerNote() {
+			const note = t('nextcloud-vue', 'Changes are saved straight away')
+			return this.appName ? `${note} · ${this.appName}` : note
+		},
+
+		/** @return {string} The Close button label. */
+		closeLabel() {
+			return t('nextcloud-vue', 'Close')
+		},
+	},
+
+	methods: {
+		/**
+		 * Add a section to the navigation, kept in `order`; a section
+		 * without one goes last. Until the reader picks one, the first
+		 * section is current.
+		 *
+		 * @param {string} id The section id.
+		 * @param {string} name The section name.
+		 * @param {number} [order] The section's place.
+		 * @param {Array} [icon] The section's icon vnodes.
+		 */
+		registerSection(id, name, order, icon) {
+			const rest = this.sections.filter((section) => section.id !== id)
+			const place = typeof order === 'number' ? order : Math.max(0, ...rest.map((section) => section.order)) + 1
+			this.sections = [...rest, { id, name, order: place, icon: icon ? markRaw(icon) : null }].sort((a, b) => a.order - b.order)
+			if (!this.picked) {
+				this.selected = this.sections[0].id
+			}
+		},
+
+		/**
+		 * Remove a section from the navigation.
+		 *
+		 * @param {string} id The section id.
+		 */
+		unregisterSection(id) {
+			this.sections = this.sections.filter((section) => section.id !== id)
+			if (this.selected === id) {
+				this.selected = this.sections.length > 0 ? this.sections[0].id : ''
+			}
+		},
+
+		/**
+		 * Mark a section current and scroll it into view.
+		 *
+		 * @param {string} id The section id.
+		 */
+		selectSection(id) {
+			this.picked = true
+			this.selected = id
+			const target = typeof document !== 'undefined' ? document.getElementById(`settings-section_${id}`) : null
+			if (target && typeof target.scrollIntoView === 'function') {
+				target.scrollIntoView({ behavior: 'smooth', block: 'start' })
+			}
+		},
+
+		/**
+		 * Follow NcDialog's own open state.
+		 *
+		 * @param {boolean} value Whether NcDialog is open.
+		 */
+		onUpdateOpen(value) {
+			if (!value) {
+				this.close()
+			}
+		},
+
+		/** Close the dialog. */
+		close() {
+			/**
+			 * @event update:open Emitted with `false` when the dialog closes (Close button, close icon, Escape).
+			 */
+			this.$emit('update:open', false)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-user-settings-dialog__body {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0 24px;
+}
+
+.cn-user-settings-dialog__nav {
+	flex: 0 0 200px;
+	width: 200px;
+	padding-top: 18px;
+}
+
+.cn-user-settings-dialog__nav ul {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-user-settings-dialog__nav-link {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-height: 40px;
+	padding: 0 12px;
+	border-radius: var(--border-radius-element, 8px);
+	font-size: 15px;
+	color: var(--color-main-text);
+	text-decoration: none;
+}
+
+.cn-user-settings-dialog__nav-link:hover {
+	background: var(--color-background-hover);
+}
+
+.cn-user-settings-dialog__nav-link:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+
+.cn-user-settings-dialog__nav-link--active,
+.cn-user-settings-dialog__nav-link--active:hover {
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-weight: 600;
+}
+
+.cn-user-settings-dialog__nav-icon {
+	display: inline-flex;
+	flex: none;
+	width: 18px;
+	height: 18px;
+	align-items: center;
+	justify-content: center;
+}
+
+.cn-user-settings-dialog__sections {
+	display: flex;
+	flex: 1 1 380px;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.cn-user-settings-dialog__sections :deep(.app-settings-section) {
+	margin: 0;
+	padding: 18px 0;
+	border-top: 1px solid var(--color-border);
+}
+
+.cn-user-settings-dialog__sections :deep(.app-settings-section__name) {
+	margin: 0 0 12px;
+	font-size: 17px;
+	font-weight: 700;
+}
+
+.cn-user-settings-dialog__note {
+	flex: 1 1 auto;
+	margin: 0;
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+</style>

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -225,6 +225,18 @@ export default {
 		CnActionsMenu,
 	},
 
+	provide() {
+		return {
+			/**
+			 * Whether this card draws a title row, so a widget inside it can
+			 * leave out a heading of its own (nc-widget-header).
+			 *
+			 * @return {boolean}
+			 */
+			cnWidgetTitled: () => this.titleVisible && Boolean(this.displayTitle),
+		}
+	},
+
 	inject: {
 		/**
 		 * Host translate function provided by CnAppRoot as

package/src/css/dialog.css

@@ -203,3 +203,50 @@
 .cn-dialog__confirm-pending {
 	opacity: 0.45;
 }
+
+/* On a phone the board dialog is a bottom sheet (board PqMobiel): full width,
+   anchored to the bottom, as tall as its content up to the screen less the
+   header, a 16px top radius and a grab bar. The footer buttons share the row. */
+@media (max-width: 600px) {
+	.modal-mask.cn-dialog-board .modal-wrapper .modal-container,
+	.modal-mask.cn-dialog-board .modal-wrapper--normal > .modal-container {
+		position: absolute;
+		inset: auto 0 0;
+		width: 100%;
+		max-width: 100%;
+		height: auto;
+		max-height: calc(100% - var(--header-height, 50px));
+		border-radius: 16px 16px 0 0;
+	}
+
+	.modal-mask.cn-dialog-board .modal-container::before {
+		content: '';
+		display: block;
+		flex: none;
+		width: 40px;
+		height: 4px;
+		margin: 8px auto 0;
+		border-radius: 2px;
+		background: var(--color-border-dark);
+	}
+
+	.modal-mask.cn-dialog-board .modal-container {
+		flex-direction: column;
+	}
+
+	.cn-dialog-board .dialog {
+		height: auto;
+		min-height: 0;
+	}
+
+	.cn-dialog-board .dialog__content {
+		flex: 0 1 auto;
+		overflow-y: auto;
+	}
+
+	.cn-dialog-board .dialog__actions > .button-vue,
+	.cn-dialog-board .dialog__actions > * {
+		flex: 1 1 0;
+		min-height: 44px;
+	}
+}

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

@@ -660,3 +660,11 @@
 .cn-look-board:has(.cn-detail-page) > .app-sidebar__toggle {
 	display: none;
 }
+
+/* Below 768px the header is a column (detail-page.css), where the 320px basis
+   above would be a 320px HEIGHT: the title sat in a band of white on a phone. */
+@media (max-width: 768px) {
+	.cn-look-board .cn-detail-page__header--board > :first-child {
+		flex: none;
+	}
+}

package/src/css/look-board.css

@@ -591,6 +591,39 @@
 	max-width: none;
 }
 
+/* A Nextcloud text field or text area in a board settings card has its label
+   above the control (14px/600), as the boards draw it (PqBeheer Leadbeheer,
+   PqBeheerKassa Btw), instead of floating inside the border. The label stays
+   the field's own `<label for>`; it moves out of the control and the field
+   makes room for it. With the label outside, the placeholder shows at rest.
+   @spec openspec/changes/settings-section-board-fields/specs/settings-board-look/spec.md#requirement-a-settings-card-labels-its-text-fields-above-the-control */
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .input-field:has(.input-field__label),
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .textarea:has(.textarea__label) {
+	margin-block-start: 26px;
+}
+
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .input-field__input + .input-field__label,
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .textarea__input + .textarea__label {
+	inset-block-start: auto;
+	inset-block-end: calc(100% + 4px);
+	inset-inline: 0 auto;
+	max-width: 100%;
+	margin: 0;
+	padding: 0;
+	background: none;
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 20px;
+	pointer-events: auto;
+	transition: none;
+}
+
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .input-field:has(.input-field__label) .input-field__input:not(:focus)::placeholder,
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .textarea__input:not(:focus):not(.textarea__input--label-outside)::placeholder {
+	opacity: 1 !important;
+}
+
 /* 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/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.108.0",
+	"version": "2.111.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -4285,10 +4285,16 @@
 						"greeting": {
 							"oneOf": [
 								{ "type": "boolean" },
-								{ "type": "string", "enum": ["first", "full"] }
+								{ "type": "string", "enum": ["first", "full", "date"] },
+								{
+									"type": "object",
+									"required": ["label"],
+									"additionalProperties": false,
+									"properties": { "label": { "type": "string", "minLength": 1, "description": "i18n key drawn where the greeting would be." } }
+								}
 							],
 							"default": false,
-							"description": "type='dashboard': greet the reader in the header subtitle. `true` or \"first\" writes \"Good afternoon, Pieter · Monday 5 October 2026\", \"full\" uses the whole display name; the page `description` follows after another middle dot (screens-dashboard-greeting-header). Maps to CnDashboardPage `greeting`."
+							"description": "type='dashboard': greet the reader in the header subtitle. `true` or \"first\" writes \"Good afternoon, Pieter · Monday 5 October 2026\", \"full\" uses the whole display name; the page `description` follows after another middle dot (screens-dashboard-greeting-header). Since 2.111.0 \"date\" leads with the date alone (\"Tuesday 7 October 2026 · ...\") and `{ \"label\": \"Customer contact\" }` puts the translated label where the greeting would be (dashboard-greeting-label). Maps to CnDashboardPage `greeting`."
 						},
 						"viewLinks": {
 							"type": "array",