@conduction/nextcloud-vue 2.92.0 → 2.94.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -21,6 +21,8 @@
 				:title="title"
 				:description="headerDescription"
 				:icon="showTitleIcon && !isBoardLook ? resolvedIcon : ''"
+				:breadcrumb="breadcrumb"
+				:meta="headerMetaText"
 				:visuallyHidden="!showTitle">
 				<!-- The board's header buttons (`headerButtons`), beside the
 				     title. Declaring them takes the Views and Actions menus
@@ -734,6 +736,7 @@
 					:columnOverrides="columnOverrides"
 					:rowClass="rowClass"
 					:rowTitle="rowTitle"
+					:showUnread="showUnreadRows"
 					:filterable="tableHeaderFilters"
 					:activeFilters="effectiveActiveFilters"
 					:filterRegister="typeof register === 'string' ? register : ''"
@@ -1609,6 +1612,31 @@ export default {
 			required: true,
 		},
 
+		/**
+		 * 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`),
+		 * such as "{total} open": `{total}` and `{shown}` are the list's counts.
+		 *
+		 * @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: '',
+		},
+
 		/** Optional description shown below the title */
 		description: {
 			type: String,
@@ -2232,7 +2260,7 @@ export default {
 		 * can open is an ordinary segment; one it cannot (no board columns, no
 		 * map configured) is drawn disabled, named "<mode>: not available on
 		 * this list". Fed from `pages[].config.viewSwitch`. Ignored without the
-		 * board look, and absent the switch is as before.
+		 * board look; absent, the board look draws all four.
 		 *
 		 * @type {Array<'table' | 'cards' | 'board' | 'map'>}
 		 * @spec openspec/changes/screens-view-switch-parity/specs/view-switch-board-look/spec.md#requirement-the-manifest-can-draw-segments-the-page-cannot-open
@@ -3555,6 +3583,8 @@ export default {
 	data() {
 		return {
 			currentViewMode: this.viewMode,
+			/** Whether `?_view=` names a mode the page did not offer yet, to open once it does. */
+			routeViewPending: false,
 			/** The column field the reader picked in the board's column switch; '' = the default. */
 			boardColumnFieldChoice: '',
 			/** The rows a reference column field is built from, by field. */
@@ -4118,11 +4148,14 @@ export default {
 		 * @spec openspec/changes/screens-view-switch-parity/specs/view-switch-board-look/spec.md#requirement-the-manifest-can-draw-segments-the-page-cannot-open
 		 */
 		viewSwitchDisabledModes() {
-			if (!this.isBoardLook || !Array.isArray(this.viewSwitch)) {
+			if (!this.isBoardLook) {
 				return []
 			}
+			// The index boards draw all four segments, so the board look does
+			// too unless the manifest names its own list.
+			const listed = Array.isArray(this.viewSwitch) ? this.viewSwitch : ['table', 'cards', 'board', 'map']
 			const offered = [...this.effectiveToggleModes, ...(this.showMapSegment ? ['map'] : [])]
-			return this.viewSwitch.filter((mode) => ['table', 'cards', 'board', 'map'].includes(mode) && !offered.includes(mode))
+			return listed.filter((mode) => ['table', 'cards', 'board', 'map'].includes(mode) && !offered.includes(mode))
 		},
 
 		/**
@@ -4160,6 +4193,17 @@ export default {
 			})
 		},
 
+		/**
+		 * The modes `?_view=` can open: the toggle's modes plus the map when
+		 * the page offers it.
+		 *
+		 * @return {Array<string>} The modes.
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-the-address-opens-a-view-mode-that-arrives-later
+		 */
+		routeViewModes() {
+			return [...this.effectiveToggleModes, ...(this.showMapSegment ? ['map'] : [])]
+		},
+
 		/**
 		 * The column fields the board offers (`board.columnFields`), for the
 		 * column switch (screens-board-reference-columns).
@@ -5380,6 +5424,21 @@ export default {
 			return this.isSelfFetchMode ? this.list.pagination.value : this.pagination
 		},
 
+		/**
+		 * Whether the table marks unread rows. The boards draw every row alike,
+		 * so under the board look only a page that offers the Unread lens
+		 * (`personalLenses`) marks them; the Nextcloud look always does.
+		 *
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-unread-rows-are-marked-only-where-the-reader-asked-for-them
+		 * @return {boolean} True when unread rows read in bold with the dot.
+		 */
+		showUnreadRows() {
+			if (!this.isBoardLook) {
+				return true
+			}
+			return Array.isArray(this.personalLenses) && this.personalLenses.includes('unread')
+		},
+
 		/** Resolved schema OBJECT (for column generation / icons / labels). */
 		/**
 		 * Whether the table shows its header filters. A self-fetching page
@@ -6002,8 +6061,9 @@ export default {
 					}
 					// The board's header: Export reads "Download" with its icon and
 					// the Actions menu reads "Actions", without the manifest saying so.
-					if (this.isBoardLook && label === '' && button.action === 'export') {
-						label = t('nextcloud-vue', 'Download')
+					// A labelled Export keeps the icon too, unless it names its own.
+					if (this.isBoardLook && button.action === 'export') {
+						label = label || t('nextcloud-vue', 'Download')
 						icon = icon || 'Download'
 					}
 					if (label === '' && button.action === 'actions-menu') {
@@ -6286,6 +6346,22 @@ export default {
 		 * @spec openspec/changes/screens-table-footer-and-system-dates-parity/specs/index-list-board-look/spec.md#requirement-the-count-reads-in-the-users-language
 		 * @return {string}
 		 */
+		/**
+		 * The header meta note with the list's counts filled in.
+		 *
+		 * @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
+		 * @return {string}
+		 */
+		headerMetaText() {
+			if (!this.headerMeta) {
+				return ''
+			}
+			const total = this.effectivePagination?.total
+			return this.cnTranslate(this.headerMeta)
+				.replace('{shown}', String(this.effectiveObjects.length))
+				.replace('{total}', typeof total === 'number' ? String(total) : '')
+		},
+
 		headerDescription() {
 			const total = this.effectivePagination?.total
 			// Board look: the count line is a template over the rows on this page
@@ -6476,6 +6552,12 @@ export default {
 			this.applyViewModeFromRoute()
 		},
 
+		routeViewModes() {
+			if (this.routeViewPending) {
+				this.applyViewModeFromRoute()
+			}
+		},
+
 		boardFetchKey: {
 			immediate: true,
 			handler(key) {
@@ -6908,6 +6990,10 @@ export default {
 		 */
 		async loadFilterCounts() {
 			const requestKey = this.countRequestKey
+			if (this.isNamedSource) {
+				await this.loadNamedSourceCounts(requestKey)
+				return
+			}
 			const schema = this.exportSchemaSlug
 			if (requestKey === '' || !this.register || !schema) {
 				this.tabCounts = null
@@ -6939,6 +7025,46 @@ export default {
 			this.savedViewCounts = viewCounts
 		},
 
+		/**
+		 * The quick-filter counts of a named source (`entitySource`): each tab
+		 * that asks is counted by the source's own `count(config)`, with the
+		 * tab's filter over `sourceConfig`. A source without `count` shows
+		 * none; a failed count leaves that tab without a number.
+		 *
+		 * @param {string} requestKey The `countRequestKey` this load answers.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-a-named-source-counts-its-quick-filters
+		 */
+		async loadNamedSourceCounts(requestKey) {
+			const count = this.namedSource ? this.namedSource.count : null
+			if (requestKey === '' || typeof count !== 'function') {
+				this.tabCounts = null
+				this.savedViewCounts = null
+				return
+			}
+			const params = (this.$route && this.$route.params) || {}
+			const ctx = typeof this.selfFetchTokenCtx === 'function' ? this.selfFetchTokenCtx() : {}
+			const tabCounts = {}
+			await Promise.all(this.countEntries
+				.filter((entry) => entry.key.startsWith('tab:'))
+				.map(async (entry) => {
+					const config = resolveFilterMap({ ...(this.sourceConfig || {}), ...(entry.filter || {}) }, params, ctx)
+					try {
+						const total = await count(config)
+						if (Number.isFinite(total)) {
+							tabCounts[Number(entry.key.slice(4))] = total
+						}
+					} catch {
+						// No number for this tab.
+					}
+				}))
+			if (requestKey !== this.countRequestKey) {
+				return
+			}
+			this.tabCounts = tabCounts
+			this.savedViewCounts = null
+		},
+
 		// ── Split view (case-page-and-list-as-a-place) ──────────────────
 
 		/**
@@ -9203,6 +9329,7 @@ export default {
 		 * @param {string} mode 'table' or 'cards'
 		 */
 		onViewModeChange(mode) {
+			this.routeViewPending = false
 			this.currentViewMode = mode
 			this.$emit('view-mode-change', mode)
 		},
@@ -9212,16 +9339,26 @@ export default {
 		 * offers it. The key starts with `_`, like `_search` and `_page`, so it
 		 * is never read as a list filter. A menu entry's `query` can so open a
 		 * list as its board, on the one page that lists the schema
-		 * (screens-board-reference-columns).
+		 * (screens-board-reference-columns). A mode the page offers only later
+		 * (the map, once rows with a geometry are in) opens when it arrives,
+		 * unless the reader picked a view first.
 		 *
 		 * @return {void}
 		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-the-address-can-open-a-list-in-a-view-mode
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-the-address-opens-a-view-mode-that-arrives-later
 		 */
 		applyViewModeFromRoute() {
 			const wanted = this.$route?.query?._view
-			if (typeof wanted === 'string' && wanted !== this.currentViewMode && this.effectiveToggleModes.includes(wanted)) {
+			if (typeof wanted !== 'string' || wanted === '' || wanted === this.currentViewMode) {
+				this.routeViewPending = false
+				return
+			}
+			if (this.routeViewModes.includes(wanted)) {
 				this.currentViewMode = wanted
+				this.routeViewPending = false
+				return
 			}
+			this.routeViewPending = true
 		},
 
 		/**

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/CnPageHeader/CnHeaderTrail.vue

@@ -0,0 +1,140 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Conduction B.V.
+  SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<div
+		v-if="crumbs.length > 0 || meta"
+		class="cn-header-trail cn-detail-page__header-row2"
+		data-testid="cn-header-trail">
+		<CnBreadcrumbs
+			v-if="crumbs.length > 0"
+			class="cn-detail-page__breadcrumbs cn-detail-page__breadcrumbs--row2"
+			:crumbs="crumbs"
+			:rootText="crumbs[0].icon === undefined"
+			:separator="separator"
+			data-testid="cn-header-trail-breadcrumbs" />
+		<span
+			v-if="crumbs.length > 0 && meta"
+			class="cn-detail-page__header-dot"
+			aria-hidden="true">&middot;</span>
+		<span
+			v-if="meta"
+			class="cn-detail-page__header-meta"
+			data-testid="cn-header-trail-meta">{{ meta }}</span>
+	</div>
+</template>
+
+<script>
+import { CnBreadcrumbs } from '../CnBreadcrumbs/index.js'
+
+/**
+ * The breadcrumb and meta line under a page title: "Instellingen / Zaaktypen
+ * · 12 zaaktypen". It draws the same markup and classes as the board look's
+ * detail header row, so a list, dashboard or settings page carries the
+ * detail page's breadcrumb style rather than one of its own.
+ *
+ * `breadcrumb` is one crumb or a list, each `{ label, route?, params?, href?,
+ * icon?, separator? }`. The page title follows as the current crumb.
+ */
+export default {
+	name: 'CnHeaderTrail',
+
+	components: { CnBreadcrumbs },
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The crumbs before the current page, one object or a list.
+		 *
+		 * @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,
+		},
+
+		/** The current crumb: the page title, already translated. */
+		current: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * The note after the crumbs and a middle dot, already resolved.
+		 *
+		 * @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
+		 */
+		meta: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Translate function for the crumb labels; falls back to the injected
+		 * `cnTranslate`.
+		 *
+		 * @type {((key: string) => string)|null}
+		 */
+		translate: {
+			type: Function,
+			default: null,
+		},
+	},
+
+	computed: {
+		/**
+		 * The declared crumbs that carry a label.
+		 *
+		 * @return {Array<object>}
+		 */
+		declared() {
+			const list = Array.isArray(this.breadcrumb) ? this.breadcrumb : (this.breadcrumb ? [this.breadcrumb] : [])
+			return list.filter((crumb) => crumb && typeof crumb.label === 'string' && crumb.label !== '')
+		},
+
+		/**
+		 * The crumbs for CnBreadcrumbs: each declared crumb as a link, then the
+		 * current page. Empty without a declared crumb.
+		 *
+		 * @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
+		 * @return {Array<object>}
+		 */
+		crumbs() {
+			if (this.declared.length === 0) {
+				return []
+			}
+			const out = this.declared.map((crumb) => {
+				const entry = { label: (this.translate ?? this.cnTranslate)(crumb.label) }
+				if (typeof crumb.icon === 'string' && crumb.icon !== '') {
+					entry.icon = crumb.icon
+				}
+				if (crumb.route) {
+					entry.to = { name: crumb.route, ...(crumb.params ? { params: crumb.params } : {}) }
+				} else if (crumb.href) {
+					entry.href = crumb.href
+				}
+				return entry
+			})
+			if (this.current) {
+				out.push({ label: this.current })
+			}
+			return out
+		},
+
+		/**
+		 * The text between the crumbs: the first crumb's `separator`, else `/`.
+		 *
+		 * @return {string}
+		 */
+		separator() {
+			const declared = this.declared[0] && this.declared[0].separator
+			return typeof declared === 'string' && declared !== '' ? declared : '/'
+		},
+	},
+}
+</script>

package/src/components/CnPageHeader/CnPageHeader.md

@@ -81,3 +81,14 @@ With extra content (e.g., a badge or status indicator):
   </template>
 </CnPageHeader>
 ```
+
+Breadcrumb and meta: `breadcrumb` (one crumb `{ label, route?, params?, href?, icon?, separator? }` or a list) draws a
+line under the title in the detail header's breadcrumb style, with the title as the current crumb; `meta` follows after a
+middle dot:
+
+```vue
+<CnPageHeader
+  title="Zaaktypen"
+  :breadcrumb="{ label: 'Instellingen', href: '#instellingen' }"
+  meta="14 zaaktypen" />
+```

package/src/components/CnPageHeader/CnPageHeader.vue

@@ -13,6 +13,12 @@
 			<h1 class="cn-page-header__title" data-testid="cn-page-title">
 				{{ resolvedTitle }}
 			</h1>
+			<CnHeaderTrail
+				v-if="!visuallyHidden"
+				:breadcrumb="breadcrumb"
+				:current="resolvedTitle"
+				:meta="resolvedMeta"
+				:translate="effectiveTranslate" />
 			<p v-if="description && !visuallyHidden" class="cn-page-header__description" data-testid="cn-page-description">
 				{{ resolvedDescription }}
 			</p>
@@ -22,6 +28,7 @@
 </template>
 
 <script>
+import CnHeaderTrail from './CnHeaderTrail.vue'
 import { CnIcon } from '../CnIcon/index.js'
 
 /**
@@ -64,6 +71,7 @@ export default {
 	name: 'CnPageHeader',
 
 	components: {
+		CnHeaderTrail,
 		CnIcon,
 	},
 
@@ -90,6 +98,31 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * A breadcrumb under the title: one crumb or a list, each
+		 * `{ label, route?, params?, href?, icon?, separator? }`. The title
+		 * follows as the current crumb. Drawn as the board look's detail
+		 * header row.
+		 *
+		 * @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, such as "12 open". Run
+		 * through the host translate function.
+		 *
+		 * @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
+		 */
+		meta: {
+			type: String,
+			default: '',
+		},
+
 		/** Optional MDI icon name (rendered via CnIcon) */
 		icon: {
 			type: String,
@@ -153,6 +186,15 @@ export default {
 		resolvedDescription() {
 			return this.description ? this.effectiveTranslate(this.description) : this.description
 		},
+
+		/**
+		 * The meta note run through the host translate function.
+		 *
+		 * @return {string}
+		 */
+		resolvedMeta() {
+			return this.meta ? this.effectiveTranslate(this.meta) : ''
+		},
 	},
 }
 </script>

package/src/components/CnPagination/CnPagination.vue

@@ -8,13 +8,13 @@
 		  Board variant (`variant: "board"`): the footer of the table card as the
 		  screens draw it. The count text at the start, numbered 34px links at
 		  the end, "Previous" only after the first page and "Next" only before
-		  the last. No First, no Last, no page-size select.
+		  the last (inert on a single page). No First, no Last, no page-size select.
 		-->
 		<template v-if="isBoardVariant">
 			<span class="cn-pagination__page-info cn-pagination__board-count" data-testid="cn-pagination-board-count">
 				{{ boardCountText }}
 			</span>
-			<nav v-if="totalPages > 1" class="cn-pagination__board-pages" :aria-label="t('nextcloud-vue', 'Pagination')">
+			<nav class="cn-pagination__board-pages" :aria-label="t('nextcloud-vue', 'Pagination')">
 				<button
 					v-if="currentPage > 1"
 					type="button"
@@ -43,6 +43,14 @@
 					@click="changePage(currentPage + 1)">
 					{{ nextLabel }}
 				</button>
+				<!-- A single page still draws its "1" and an inert Next, as the boards do. -->
+				<span
+					v-else-if="totalPages <= 1"
+					class="cn-pagination__board-link cn-pagination__board-link--wide cn-pagination__board-link--disabled"
+					aria-disabled="true"
+					data-testid="cn-pagination-next">
+					{{ nextLabel }}
+				</span>
 			</nav>
 		</template>
 

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -727,9 +727,9 @@ export default {
 		},
 
 		/**
-		 * The row's due text (`due`: `{ field, todayLabel?, overdueLabel?, emptyText? }`):
-		 * "3 dagen te laat" in the danger tone, "Vandaag", the date otherwise,
-		 * `emptyText` when the field is empty.
+		 * The row's due text (`due`: `{ field, todayLabel?, overdueLabel?, upcomingLabel?, upcomingWeeksLabel?, upcomingWeeksFrom?, emptyText? }`):
+		 * "3 dagen te laat" in the danger tone, "Vandaag", the date or the time
+		 * left ("nog 4 dagen") otherwise, `emptyText` when the field is empty.
 		 *
 		 * @param {object} row The row.
 		 * @return {{text: string, tone: string}|null} The text and tone, or null.

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
 		},
 	},
 }