@conduction/nextcloud-vue 2.91.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/CnTabsWidget/CnTabsWidget.vue

@@ -187,7 +187,7 @@ import { resolveTabCount } from '../../utils/detailActionModel.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { isActivityWidget } from '../../utils/headerMeta.js'
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js'
-import { evaluateVisibleWhen, evaluateVisibleWhenLocal, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
+import { evaluateVisibleWhen, evaluateVisibleWhenLocal, evaluateWorkspaceCondition, isLocallyDecidableVisibleWhen, isWorkspaceCondition } from '../../utils/visibleWhen.js'
 import { widgetTitleOf } from '../../utils/widgetDispatch.js'
 import { CnActionsMenu } from '../CnActionsMenu/index.js'
 
@@ -331,6 +331,13 @@ export default {
 		 * `visibleWhen` reads them as `@context.<name>`. Null on any other page.
 		 */
 		cnDetailVisibilityRows: { default: null },
+		/**
+		 * The page's workspace bag (CnDashboardPage provides it), which a
+		 * page control such as a chips filter writes. A widget in a stack is
+		 * left out while its workspace `visibleWhen` does not hold. Null off a
+		 * dashboard.
+		 */
+		cnWorkspaceContext: { default: null },
 		/**
 		 * The host's translate (CnAppRoot provides `cnTranslate`), so a tab
 		 * label written in the manifest reads in the user's language.
@@ -588,7 +595,8 @@ export default {
 				// widget is skipped. The first that resolves is the panel's.
 				const ids = this.tabWidgetIds(tab)
 				const widgets = ids.length > 1
-					? ids.map((id) => this.availableWidgets.find((w) => w && w.id === id) || null).filter(Boolean)
+					? ids.map((id) => this.availableWidgets.find((w) => w && w.id === id) || null)
+							.filter((w) => w && !this.hiddenByWorkspace(w))
 					: []
 				const widget = ids.length > 1
 					? (widgets[0] || null)
@@ -837,6 +845,29 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Whether a page control hides a widget of a stack right now: its
+		 * `visibleWhen` (on the widget, its content or its props) is a
+		 * workspace condition that does not hold. Off a dashboard there is no
+		 * workspace, and nothing is hidden. Other conditions are not looked at
+		 * here.
+		 *
+		 * @param {object} widget The widget definition.
+		 * @return {boolean} True when the widget must not draw.
+		 * @spec openspec/changes/tabs-stack-follows-page-controls/specs/tabs-widget/spec.md#requirement-a-widget-in-a-tab-stack-follows-the-page-controls
+		 */
+		hiddenByWorkspace(widget) {
+			const cond = widget.visibleWhen || widget.content?.visibleWhen || widget.props?.visibleWhen || null
+			if (!isWorkspaceCondition(cond)) {
+				return false
+			}
+			const bag = this.cnWorkspaceContext
+			if (!bag || typeof bag !== 'object') {
+				return false
+			}
+			return !evaluateWorkspaceCondition(cond, 'value' in bag ? bag.value : bag)
+		},
+
 		/**
 		 * 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

package/src/components/CnTextWidget/CnTextWidget.vue

@@ -60,6 +60,17 @@
 			:style="contentStyle">
 			{{ placeholderText }}
 		</span>
+		<a
+			v-if="link"
+			class="cn-text-widget__link"
+			data-testid="cn-text-widget-link"
+			:href="link.url"
+			:target="link.external ? '_blank' : null"
+			:rel="link.external ? 'noopener noreferrer' : null"
+			@click="openLink">
+			{{ link.label }}
+			<ChevronRight :size="16" />
+		</a>
 	</div>
 </template>
 
@@ -67,6 +78,8 @@
 import { translate as t } from '@nextcloud/l10n'
 import DOMPurify from 'dompurify'
 import { Marked } from 'marked'
+import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
 import { isPlaceholderCell } from '../../utils/textTable.js'
 
 // Per-module `Marked` instance so configuration is scoped here and does NOT
@@ -120,13 +133,23 @@ function ensureDomPurifyHook() {
 export default {
 	name: 'CnTextWidget',
 
+	components: { ChevronRight },
+
+	inject: {
+		/** The app's translate function, provided by CnAppRoot. Identity outside one. */
+		cnTranslate: { default: () => (key) => key },
+	},
+
 	props: {
 		/**
 		 * Persisted widget content blob: `{text, fontSize, color,
-		 * backgroundColor, textAlign, contentMode, tableMode, tableData}`.
+		 * backgroundColor, textAlign, contentMode, tableMode, tableData, link}`.
 		 * All keys are optional; missing keys collapse to documented defaults.
+		 * `text` and `link.label` go through the app's translate function.
+		 * `link` is `{label, route}` (a page id, or a path starting with `/`) or
+		 * `{label, href}` (an external URL), drawn under the text.
 		 *
-		 * @type {{text: string, fontSize: string, color: string, backgroundColor: string, textAlign: string, contentMode: string, tableMode: boolean, tableData: object}}
+		 * @type {{text: string, fontSize: string, color: string, backgroundColor: string, textAlign: string, contentMode: string, tableMode: boolean, tableData: object, link: {label: string, route: string, href: string}}}
 		 */
 		content: {
 			type: Object,
@@ -135,9 +158,34 @@ export default {
 	},
 
 	computed: {
-		/** The author text, or '' when absent / non-string. */
+		/** The author text through the app's translate function, or '' when absent / non-string. */
 		text() {
-			return typeof this.content?.text === 'string' ? this.content.text : ''
+			return typeof this.content?.text === 'string' ? this.tr(this.content.text) : ''
+		},
+
+		/**
+		 * The link under the text, from `content.link`: `{ label, route }`
+		 * (a page id, or a router path when it starts with `/`) or
+		 * `{ label, href }` (an external URL, opened in a new tab). The label
+		 * goes through the app's translate function. Null without a label or
+		 * a target.
+		 *
+		 * @return {{label: string, url: string, location: (object|null), external: boolean}|null} The link.
+		 */
+		link() {
+			const link = this.content?.link
+			if (!link || typeof link !== 'object' || typeof link.label !== 'string' || link.label === '') {
+				return null
+			}
+			if (typeof link.route === 'string' && link.route !== '') {
+				const location = link.route.startsWith('/') ? { path: link.route } : { name: link.route }
+				const url = resolveHref(location, this.$router)
+				return url ? { label: this.tr(link.label), url, location, external: false } : null
+			}
+			if (typeof link.href === 'string' && link.href !== '') {
+				return { label: this.tr(link.label), url: link.href, location: null, external: true }
+			}
+			return null
 		},
 
 		/** Whether the text has any non-whitespace content. */
@@ -253,6 +301,7 @@ export default {
 				'justify-content': 'center',
 				overflow: 'auto',
 				'background-color': this.backgroundColor,
+				...(this.link ? { 'flex-direction': 'column', gap: '8px', 'align-items': 'flex-start' } : {}),
 			}
 		},
 
@@ -287,6 +336,27 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest string through the app's translate function.
+		 *
+		 * @param {string} text The string.
+		 * @return {string} The translated string.
+		 */
+		tr(text) {
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/**
+		 * Route a plain click on an in-app link, so the page does not reload.
+		 *
+		 * @param {MouseEvent} event The click.
+		 */
+		openLink(event) {
+			if (this.link && !this.link.external) {
+				followLinkClick(event, this.link.location, this.$router)
+			}
+		},
+
 		/**
 		 * Run cell text through DOMPurify so the table-mode render path has
 		 * the same XSS-stripping guarantees as the text-mode path.
@@ -518,4 +588,19 @@ export default {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 }
+
+.cn-text-widget__link {
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--color-primary-element);
+	text-decoration: none;
+}
+
+.cn-text-widget__link:hover,
+.cn-text-widget__link:focus-visible {
+	text-decoration: underline;
+}
 </style>

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