@conduction/nextcloud-vue 2.58.0 → 2.60.0

package/src/components/CnWeekStripWidgetForm/CnWeekStripWidgetForm.vue

@@ -0,0 +1,265 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+
+<template>
+	<div class="cn-week-strip-form">
+		<div class="cn-week-strip-form__row2">
+			<CnRegisterSchemaSelect
+				:register="source.register"
+				:schema="source.schema"
+				@update:register="updateSource('register', $event)"
+				@update:schema="updateSource('schema', $event)" />
+		</div>
+
+		<div class="cn-week-strip-form__row2">
+			<CnFieldPicker
+				:value="dateField"
+				:label="t('nextcloud-vue', 'Date field')"
+				:options="availableFields"
+				placeholder="deadline"
+				@update="updateField('dateField', $event)" />
+			<CnFieldPicker
+				:value="titleField"
+				:label="t('nextcloud-vue', 'Title field')"
+				:options="availableFields"
+				placeholder="title"
+				@update="updateField('titleField', $event)" />
+		</div>
+
+		<NcTextField
+			:modelValue="metaFieldsText"
+			:label="t('nextcloud-vue', 'Extra fields under the title (comma separated)')"
+			placeholder="identifier, type"
+			@update:modelValue="updateField('metaFieldsText', $event)" />
+
+		<CnFilterRowsEditor :value="filterRows" :fields="availableFields" @input="onFilterRows" />
+
+		<div class="cn-week-strip-form__row2">
+			<NcSelect
+				:modelValue="days"
+				:options="dayOptions"
+				:inputLabel="t('nextcloud-vue', 'Days shown')"
+				:clearable="false"
+				@update:modelValue="updateField('days', $event)" />
+			<NcTextField
+				:modelValue="itemRoute"
+				:label="t('nextcloud-vue', 'Page an item opens (page id, optional)')"
+				@update:modelValue="updateField('itemRoute', $event)" />
+		</div>
+
+		<NcTextField
+			:modelValue="emptyText"
+			:label="t('nextcloud-vue', 'Text for a day without items')"
+			@update:modelValue="updateField('emptyText', $event)" />
+	</div>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcSelect, NcTextField } from '@nextcloud/vue'
+import CnFieldPicker from '../CnFieldPicker/CnFieldPicker.vue'
+import CnFilterRowsEditor from '../CnFilterRowsEditor/CnFilterRowsEditor.vue'
+import CnRegisterSchemaSelect from '../CnRegisterSchemaSelect/CnRegisterSchemaSelect.vue'
+import { fetchSchemaProperties } from '../../utils/fetchSchemaProperties.js'
+import { filterToRows, rowsToFilter } from '../CnFilterRowsEditor/filterRows.js'
+
+/**
+ * CnWeekStripWidgetForm is the settings form of a `week-strip` widget. It
+ * edits the source (register, schema, filter), the date field the items are
+ * bucketed by, what each item shows, how many days render and the text of an
+ * empty day. Static `items` and the `lateWhen` rule are written in the
+ * manifest and pass through untouched. Emits `update:content` on every
+ * change; `validate()` asks for a register, a schema and a date field unless
+ * the widget has static items.
+ */
+export default {
+	name: 'CnWeekStripWidgetForm',
+
+	components: { NcSelect, NcTextField, CnFieldPicker, CnFilterRowsEditor, CnRegisterSchemaSelect },
+
+	props: {
+		/**
+		 * The placement being edited (pre-fills from `editingWidget.content`), or null.
+		 *
+		 * @type {{content: object}|null}
+		 */
+		editingWidget: { type: Object, default: null },
+		/**
+		 * Initial content values when not editing (registry defaults).
+		 *
+		 * @type {object}
+		 */
+		value: { type: Object, default: () => ({}) },
+	},
+
+	emits: [
+		/**
+		 * Emitted with the assembled content blob on every field change.
+		 *
+		 * @event update:content
+		 * @type {object}
+		 */
+		'update:content',
+	],
+
+	data() {
+		const initial = this.editingWidget?.content || this.value || {}
+		const src = initial.source || {}
+		return {
+			initial,
+			source: { register: src.register ?? '', schema: src.schema ?? '' },
+			limit: src.limit,
+			filterRows: filterToRows(src.filter || {}),
+			dateField: initial.dateField ?? '',
+			titleField: initial.titleField ?? '',
+			metaFieldsText: Array.isArray(initial.metaFields) ? initial.metaFields.join(', ') : '',
+			days: Number(initial.days) === 7 ? 7 : 5,
+			itemRoute: initial.itemRoute ?? '',
+			emptyText: initial.emptyText ?? '',
+			availableFields: [],
+		}
+	},
+
+	computed: {
+		/**
+		 * The day counts on offer: working days or the whole week.
+		 *
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-week-strip-widget
+		 */
+		dayOptions() {
+			return [5, 7]
+		},
+
+		/**
+		 * The assembled content blob. Keys the form does not edit (static
+		 * items, the late rule) are carried over from the initial content.
+		 *
+		 * @return {object}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-week-strip-widget
+		 */
+		assembledContent() {
+			const source = {
+				register: this.source.register,
+				schema: this.source.schema,
+				filter: rowsToFilter(this.filterRows),
+			}
+			if (this.limit !== undefined) {
+				source.limit = this.limit
+			}
+			return {
+				...this.initial,
+				source,
+				dateField: this.dateField,
+				titleField: this.titleField,
+				metaFields: this.metaFieldsText.split(',').map((field) => field.trim()).filter((field) => field !== ''),
+				days: this.days,
+				itemRoute: this.itemRoute,
+				emptyText: this.emptyText,
+			}
+		},
+	},
+
+	watch: {
+		'source.register': 'loadFields',
+		'source.schema': 'loadFields',
+	},
+
+	mounted() {
+		this.loadFields()
+	},
+
+	methods: {
+		t,
+
+		/**
+		 * Load the schema's field names for the pickers.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-week-strip-widget
+		 */
+		async loadFields() {
+			this.availableFields = await fetchSchemaProperties(this.source.register, this.source.schema)
+		},
+
+		/**
+		 * Set one field and emit the assembled content.
+		 *
+		 * @param {string} field The data key to write.
+		 * @param {string|number} value The new value.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-week-strip-widget
+		 */
+		updateField(field, value) {
+			this[field] = value
+			this.$emit('update:content', this.assembledContent)
+		},
+
+		/**
+		 * Set the register or the schema and emit.
+		 *
+		 * @param {'register'|'schema'} field The source key to write.
+		 * @param {string} value The chosen slug.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-week-strip-widget
+		 */
+		updateSource(field, value) {
+			this.source[field] = value
+			this.$emit('update:content', this.assembledContent)
+		},
+
+		/**
+		 * Take the filter editor's rows and emit.
+		 *
+		 * @param {Array<{key: string, op: string, value: string}>} rows The rows.
+		 * @return {void}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-week-strip-widget
+		 */
+		onFilterRows(rows) {
+			this.filterRows = rows
+			this.$emit('update:content', this.assembledContent)
+		},
+
+		/**
+		 * Validate the form; an empty array means valid.
+		 *
+		 * @return {string[]} The validation errors.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-week-strip-widget
+		 */
+		validate() {
+			const hasStaticItems = Array.isArray(this.initial.items) && this.initial.items.length > 0
+			if (hasStaticItems && !this.source.register && !this.source.schema) {
+				return []
+			}
+			const errors = []
+			if (!this.source.register || !this.source.schema) {
+				errors.push(t('nextcloud-vue', 'A register and schema are required'))
+			}
+			if (!this.dateField) {
+				errors.push(t('nextcloud-vue', 'A date field is required'))
+			}
+			return errors
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-week-strip-form {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.cn-week-strip-form__row2 {
+	display: flex;
+	gap: 12px;
+	align-items: flex-end;
+}
+
+.cn-week-strip-form__row2 > * {
+	flex: 1;
+	min-width: 0;
+}
+</style>

package/src/components/CnWeekStripWidgetForm/index.js

@@ -0,0 +1,4 @@
+import CnWeekStripWidgetForm from './CnWeekStripWidgetForm.vue'
+
+export default CnWeekStripWidgetForm
+export { CnWeekStripWidgetForm }

package/src/components/CnWidgetGrid/registerDashboardWidgets.js

@@ -17,20 +17,27 @@
 
 import CnChartWidget from '../CnChartWidget/CnChartWidget.vue'
 import CnChartWidgetForm from '../CnChartWidgetForm/CnChartWidgetForm.vue'
+import CnConversationWidget from '../CnConversationThread/CnConversationWidget.vue'
 import CnCountdownWidget from '../CnCountdownWidget/CnCountdownWidget.vue'
 import CnCountdownWidgetForm from '../CnCountdownWidgetForm/CnCountdownWidgetForm.vue'
+import CnDocumentReviewWidget from '../CnDocumentReviewList/CnDocumentReviewWidget.vue'
 import CnMapWidget from '../CnMapWidget/CnMapWidget.vue'
 import CnMapWidgetForm from '../CnMapWidgetForm/CnMapWidgetForm.vue'
+import CnNextStepWidget from '../CnNextStepCard/CnNextStepWidget.vue'
 import CnObjectListWidget2 from '../CnObjectListWidget/CnObjectListWidget.vue'
 import CnObjectListWidgetForm2 from '../CnObjectListWidgetForm/CnObjectListWidgetForm.vue'
 import CnRelatedObjectsWidget from '../CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue'
 import CnRelatedObjectsWidgetForm from '../CnRelatedObjectsWidgetForm/CnRelatedObjectsWidgetForm.vue'
+import CnStackedBarWidget from '../CnStackedBarWidget/CnStackedBarWidget.vue'
+import CnStackedBarWidgetForm from '../CnStackedBarWidgetForm/CnStackedBarWidgetForm.vue'
 import CnStagesWidget from '../CnStagesWidget/CnStagesWidget.vue'
 import CnStagesWidgetForm from '../CnStagesWidgetForm/CnStagesWidgetForm.vue'
 import CnStatsBlockWidget from '../CnStatsBlockWidget/CnStatsBlockWidget.vue'
 import CnStatsBlockWidgetForm from '../CnStatsBlockWidgetForm/CnStatsBlockWidgetForm.vue'
 import CnTabsWidget from '../CnTabsWidget/CnTabsWidget.vue'
 import CnTabsWidgetForm from '../CnTabsWidgetForm/CnTabsWidgetForm.vue'
+import CnWeekStripWidget from '../CnWeekStripWidget/CnWeekStripWidget.vue'
+import CnWeekStripWidgetForm from '../CnWeekStripWidgetForm/CnWeekStripWidgetForm.vue'
 // Typed widgets registered with an explicit renderer + config FORM. chart /
 // stats-block render through CnDashboardPage's own isChart()/isStatsBlock()
 // branches and `related` through CnDetailPage's isRelatedWidget() branch — the
@@ -217,6 +224,41 @@ registerDashboardWidget('countdown', {
 	surfaces: ['detail-page'],
 })
 
+// The case surfaces (detail-action-model-and-case-surfaces). Each reads the
+// BOUND RECORD, which only a detail page has, and none has a config form yet,
+// so `form: null` keeps them out of the Add-widget picker: they are placed
+// from the manifest. Registered inline for the same tree-shaking reason as
+// `map` above.
+registerDashboardWidget('next-step', {
+	renderer: CnNextStepWidget,
+	form: null,
+	defaultContent: { field: 'status', stages: {} },
+	displayName: 'Next step',
+	icon: 'CheckCircleOutline',
+	surfaces: ['detail-page'],
+	ownsTitle: true,
+})
+
+registerDashboardWidget('document-review', {
+	renderer: CnDocumentReviewWidget,
+	form: null,
+	defaultContent: { field: 'documents', statusField: 'reviewStatus', statuses: [] },
+	displayName: 'Document review',
+	icon: 'FileDocumentCheckOutline',
+	surfaces: ['detail-page'],
+	ownsTitle: true,
+})
+
+registerDashboardWidget('conversation', {
+	renderer: CnConversationWidget,
+	form: null,
+	defaultContent: { field: 'messages', endpoint: '' },
+	displayName: 'Conversation',
+	icon: 'ForumOutline',
+	surfaces: ['detail-page'],
+	ownsTitle: true,
+})
+
 // The record's stages, where clicking a stage moves the record there.
 // Registered inline for the same tree-shaking reason as `map` above.
 registerDashboardWidget('stages', {
@@ -258,6 +300,38 @@ registerDashboardWidget('tabs', {
 	surfaces: ['detail-page'],
 })
 
+// The current week as day columns, with the dated items under each day.
+// Registered inline for the same tree-shaking reason as `map` above.
+registerDashboardWidget('week-strip', {
+	renderer: CnWeekStripWidget,
+	form: CnWeekStripWidgetForm,
+	defaultContent: {
+		source: { register: '', schema: '', filter: {} },
+		dateField: '',
+		titleField: '',
+		metaFields: [],
+		days: 5,
+		itemRoute: '',
+		emptyText: '',
+	},
+	displayName: 'Week strip',
+	icon: 'Calendar',
+})
+
+// One segmented bar with a legend that carries the numbers.
+registerDashboardWidget('stacked-bar', {
+	renderer: CnStackedBarWidget,
+	form: CnStackedBarWidgetForm,
+	defaultContent: {
+		source: { register: '', schema: '', groupBy: '', filter: {} },
+		order: [],
+		labels: {},
+		emptyText: '',
+	},
+	displayName: 'Stacked bar',
+	icon: 'ChartBar',
+})
+
 /**
  * Explicit no-op that guarantees this module (and therefore every widget's
  * self-registration side effect) is evaluated. Call it once at app bootstrap if

package/src/components/index.js

@@ -130,6 +130,9 @@ export { CnLeafMountHost } from './CnLeafMountHost/index.js'
 export { CnDetailCard } from './CnDetailCard/index.js'
 export { CnCard } from './CnCard/index.js'
 export { CnChoiceCards } from './CnChoiceCards/index.js'
+export { CnNextStepCard } from './CnNextStepCard/index.js'
+export { CnDocumentReviewList } from './CnDocumentReviewList/index.js'
+export { CnConversationThread } from './CnConversationThread/index.js'
 export { CnStatsPanel } from './CnStatsPanel/index.js'
 export { CnJsonViewer } from './CnJsonViewer/index.js'
 export { CnColorPicker } from './CnColorPicker/index.js'
@@ -352,3 +355,11 @@ export { CnDetailWidgetHost } from './CnDetailWidgetHost/index.js'
 
 // Guardian/parent portal surface pattern (nextcloud-vue:guardian-portal-surface-pattern).
 export { CnGuardianHome } from './CnGuardianHome/index.js'
+
+// Workplace dashboard primitives (openspec: workplace-dashboard-primitives).
+export { CnWeekStripWidget } from './CnWeekStripWidget/index.js'
+export { CnWeekStripWidgetForm } from './CnWeekStripWidgetForm/index.js'
+export { CnStackedBarWidget } from './CnStackedBarWidget/index.js'
+export { CnStackedBarWidgetForm } from './CnStackedBarWidgetForm/index.js'
+export { CnSegmentedControl } from './CnSegmentedControl/index.js'
+export { CnBrandStripe } from './CnBrandStripe/index.js'

package/src/css/detail-page.css

@@ -342,6 +342,53 @@
 	}
 }
 
+/* The action model and case surfaces (detail-action-model-and-case-surfaces) */
+
+/* Type and status pills above the title. */
+.cn-detail-page__pills {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	gap: calc(2 * var(--default-grid-baseline));
+	margin-bottom: calc(1.5 * var(--default-grid-baseline));
+}
+
+.cn-detail-page__next-step {
+	margin-bottom: calc(5 * var(--default-grid-baseline));
+}
+
+/* Side column. The page becomes a wrapping flex row in which every child
+   takes a full line, except the body and the side column: those two share a
+   line while there is room for both (520px + 300px) and the column drops
+   under the body when there is not. No breakpoint, so it also holds inside a
+   split pane or beside an open sidebar, where the viewport says nothing about
+   the room the page has. Pages without a side column never get this class. */
+.cn-detail-page--with-side {
+	align-items: flex-start;
+	column-gap: calc(5 * var(--default-grid-baseline));
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.cn-detail-page--with-side > * {
+	flex: 1 1 100%;
+	min-width: 0;
+}
+
+.cn-detail-page--with-side > .cn-detail-page__body {
+	flex: 999 1 520px;
+}
+
+.cn-detail-page--with-side > .cn-detail-page__side {
+	flex: 1 1 300px;
+}
+
+.cn-detail-page__side {
+	display: flex;
+	flex-direction: column;
+	gap: calc(5 * var(--default-grid-baseline));
+}
+
 /* The record as a place (case-page-and-list-as-a-place) */
 
 /* A skip link that reaches the page's declared primary action. Off screen

package/src/css/table.css

@@ -334,6 +334,32 @@
 	background-color: var(--color-primary-light);
 }
 
+/* A row with a route is a real link (see CnDataTable's row link): the anchor
+   in its first cell is stretched over the whole row. The row's own controls
+   sit above it so they stay usable; keep the list in step with NESTED_CONTROL
+   in utils/rowAuxClick.js. */
+.cn-table-row--linked {
+	position: relative;
+}
+
+.cn-table-row__link {
+	position: absolute;
+	inset: 0;
+	cursor: pointer;
+}
+
+.cn-table-row__link:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: -2px;
+}
+
+.cn-table-row--linked .cn-table-col--checkbox,
+.cn-table-row--linked .cn-table-col--actions,
+.cn-table-row--linked td :is(a, button, input, select, textarea, label, summary, [role='button'], [role='checkbox'], [role='link'], [contenteditable='true']):not(.cn-table-row__link) {
+	position: relative;
+	z-index: 1;
+}
+
 /* Column Types */
 .cn-table-col--checkbox {
 	width: 50px;

package/src/index.js

@@ -65,6 +65,7 @@ export {
 	CnContainerWidget,
 	CnContainerWidgetForm,
 	CnContextMenu,
+	CnConversationThread,
 	CnCopyDialog,
 	CnCountdownWidget,
 	CnCountdownWidgetForm,
@@ -91,6 +92,7 @@ export {
 	CnDetailWidgetHost,
 	CnDividerWidget,
 	CnDividerWidgetForm,
+	CnDocumentReviewList,
 	CnEditActionsModal,
 	CnEditDataModal,
 	CnEditMenuModal,
@@ -180,6 +182,7 @@ export {
 	CnNcDashboardWidgetForm,
 	CnNcWidgetGridPicker,
 	CnNcWidgetWidget,
+	CnNextStepCard,
 	CnNoteCard,
 	CnNotesCard,
 	CnNotificationMatrix,
@@ -303,6 +306,11 @@ export {
 // @deprecated Use `CnBuildiqEditButton`.
 export { CnOpenBuildEditButton } from './components/index.js'
 
+// Workplace dashboard primitives (openspec: workplace-dashboard-primitives):
+// the week strip and stacked bar widgets with their forms, the segmented
+// control, and the brand stripe.
+export { CnBrandStripe, CnSegmentedControl, CnStackedBarWidget, CnStackedBarWidgetForm, CnWeekStripWidget, CnWeekStripWidgetForm } from './components/index.js'
+
 // AI Chat Companion component family
 export {
 	CnAiAgentPicker,
@@ -511,6 +519,7 @@ export { filterWidgetsByVisibility, getCurrentUserGroups, getCurrentUserId, isWi
 export { safeHref, safeImageSrc, safeSvgPath } from './utils/index.js'
 export { followLinkClick, isModifiedClick, isNewTabHandled, isRowMiddleClick, openRowTarget, resolveHref } from './utils/index.js'
 export { resolveImageUrl } from './utils/index.js'
+export { resolveDateVariant } from './utils/index.js'
 export { actionLink, dispatchAction } from './utils/actionsDispatcher.js'
 // Nested-modal stacking. `CnAppRoot` installs this itself; apps that do not
 // mount `CnAppRoot` should call `installModalStack()` once from `main.js`, or

package/src/integrations/builtin/analytics/CnAnalyticsCard.vue

@@ -122,7 +122,7 @@ import ChartPie from 'vue-material-design-icons/ChartPie.vue'
 import TableIcon from 'vue-material-design-icons/Table.vue'
 import ViewDashboard from 'vue-material-design-icons/ViewDashboard.vue'
 import CnDetailCard from '../../../components/CnDetailCard/CnDetailCard.vue'
-import { buildHeaders, prefixUrl } from '../../../utils/index.js'
+import { buildHeaders, prefixUrl, safeHref } from '../../../utils/index.js'
 
 const VALID_SURFACES = ['user-dashboard', 'app-dashboard', 'detail-page', 'single-entity']
 const COMPACT_LIMIT = 5
@@ -287,8 +287,9 @@ export default {
 			return `cn-analytics-card__badge--type-${type ?? 'unknown'}`
 		},
 
+		// A provider URL is used only when it is a safe scheme; else the app link.
 		reportUrl(report) {
-			if (report && report.url) {
+			if (report && report.url && safeHref(report.url) !== '#') {
 				return report.url
 			}
 			const id = this.reportKey(report)

package/src/integrations/builtin/analytics/CnAnalyticsTab.vue

@@ -82,8 +82,7 @@
 			<NcButton
 				variant="primary"
 				:href="analyticsAppUrl"
-				target="_blank"
-				rel="noopener noreferrer">
+				target="_blank">
 				<template #icon>
 					<ChartBar :size="20" />
 				</template>
@@ -131,8 +130,7 @@
 					<NcActionLink
 						:closeAfterClick="true"
 						:href="reportUrl(report)"
-						target="_blank"
-						rel="noopener noreferrer">
+						target="_blank">
 						<template #icon>
 							<OpenInNew :size="20" />
 						</template>
@@ -178,7 +176,7 @@ import ViewDashboard from 'vue-material-design-icons/ViewDashboard.vue'
 import CnAnalyticsReportCreate from '../../../components/CnAnalyticsReportCreate/CnAnalyticsReportCreate.vue'
 import CnAnalyticsReportPicker from '../../../components/CnAnalyticsReportPicker/CnAnalyticsReportPicker.vue'
 import CnStatusBadge from '../../../components/CnStatusBadge/CnStatusBadge.vue'
-import { buildHeaders, prefixUrl } from '../../../utils/index.js'
+import { buildHeaders, prefixUrl, safeHref } from '../../../utils/index.js'
 
 /**
  * CnAnalyticsTab — bespoke dataset list for the `analytics` integration.
@@ -408,8 +406,9 @@ export default {
 			return t('nextcloud-vue', 'Latest value')
 		},
 
+		// A provider URL is used only when it is a safe scheme; else the app link.
 		reportUrl(report) {
-			if (report && report.url) {
+			if (report && report.url && safeHref(report.url) !== '#') {
 				return report.url
 			}
 			const id = this.reportKey(report)

package/src/integrations/builtin/bookmarks/CnBookmarksCard.vue

@@ -34,9 +34,11 @@
 					@error="onFaviconError(entity)">
 				<Bookmark v-else :size="14" />
 				<a
+					v-if="hasSafeUrl(entity)"
 					:href="entity.url"
 					target="_blank"
 					rel="noopener noreferrer">{{ bookmarkTitle(entity) }}</a>
+				<span v-else>{{ bookmarkTitle(entity) }}</span>
 			</span>
 			<span v-else class="cn-bookmarks-card__empty">{{ emptyLabel }}</span>
 		</template>
@@ -62,9 +64,11 @@
 						@error="onFaviconError(mostRecent)">
 					<Bookmark v-else :size="14" />
 					<a
+						v-if="hasSafeUrl(mostRecent)"
 						:href="mostRecent.url"
 						target="_blank"
 						rel="noopener noreferrer">{{ bookmarkTitle(mostRecent) }}</a>
+					<span v-else>{{ bookmarkTitle(mostRecent) }}</span>
 				</div>
 				<div v-if="bookmarks.length > 1" class="cn-bookmarks-card__view-all">
 					<a
@@ -99,10 +103,12 @@
 					</div>
 					<div class="cn-bookmarks-card__row-main">
 						<a
+							v-if="hasSafeUrl(bookmark)"
 							:href="bookmark.url"
 							target="_blank"
 							rel="noopener noreferrer"
 							class="cn-bookmarks-card__title">{{ bookmarkTitle(bookmark) }}</a>
+						<span v-else class="cn-bookmarks-card__title">{{ bookmarkTitle(bookmark) }}</span>
 					</div>
 				</li>
 			</ul>
@@ -121,7 +127,7 @@ import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { NcLoadingIcon } from '@nextcloud/vue'
 import Bookmark from 'vue-material-design-icons/Bookmark.vue'
 import CnDetailCard from '../../../components/CnDetailCard/CnDetailCard.vue'
-import { buildHeaders, prefixUrl } from '../../../utils/index.js'
+import { buildHeaders, prefixUrl, safeHref } from '../../../utils/index.js'
 
 const VALID_SURFACES = ['user-dashboard', 'app-dashboard', 'detail-page', 'single-entity']
 const COMPACT_LIMIT = 5
@@ -245,6 +251,11 @@ export default {
 			return bookmark.title || bookmark.url || ''
 		},
 
+		// Bookmark URLs are user-entered (bookmarklets are `javascript:`), so only a safe one is a link.
+		hasSafeUrl(bookmark) {
+			return safeHref(bookmark.url) !== '#'
+		},
+
 		chipSubtitle(bookmark) {
 			return bookmark.description || bookmark.url || this.bookmarkTitle(bookmark)
 		},