From e8667afa1671fd90552f012eb53fdda7027e6a85 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Fri, 20 Jun 2025 10:54:46 +0200
Subject: [PATCH 1/2] refactor: use `NcDateTime` and formatting from
 `@nextcloud/l10n`

This also removes the dependency on the server provided
`.live-relative-timestamp` handling.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/Components/Announcement.vue |  34 +++-------
 src/utils/datetime.utils.js     | 111 --------------------------------
 src/views/Dashboard.vue         |   6 +-
 3 files changed, 13 insertions(+), 138 deletions(-)
 delete mode 100644 src/utils/datetime.utils.js

diff --git a/src/Components/Announcement.vue b/src/Components/Announcement.vue
index 2f606783..a7fe4914 100644
--- a/src/Components/Announcement.vue
+++ b/src/Components/Announcement.vue
@@ -20,10 +20,9 @@
 					{{ author }}
 					·
 					<span v-if="isScheduled" :title="scheduledLabel">{{ scheduledLabel }}</span>
-					<span v-else
-						class="live-relative-timestamp"
-						:data-timestamp="time * 1000"
-						:title="dateFormat">{{ dateRelative }}</span>
+					<NcDateTime v-else
+						ignore-seconds
+						:timestamp="time * 1000" />
 
 					<template v-if="isAdmin">
 						·
@@ -75,11 +74,12 @@
 </template>
 
 <script>
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDateTime from '@nextcloud/vue/components/NcDateTime'
+import NcRichText from '@nextcloud/vue/components/NcRichText'
 import { getLanguage } from '@nextcloud/l10n'
 import {
 	showError,
@@ -88,7 +88,6 @@ import {
 	deleteAnnouncement,
 	removeNotifications,
 } from '../services/announcementsService.js'
-import { formatRelativeTime } from '../utils/datetime.utils.js'
 
 export default {
 	name: 'Announcement',
@@ -97,6 +96,7 @@ export default {
 		NcActionButton,
 		NcAvatar,
 		NcButton,
+		NcDateTime,
 		NcRichText,
 	},
 	props: {
@@ -157,25 +157,11 @@ export default {
 		boundariesElement() {
 			return document.querySelector(this.$el)
 		},
-		dateTime() {
-			return new Date(this.time * 1000)
-		},
-		dateFormat() {
-			return this.dateTime.toLocaleString(getLanguage(), { dateStyle: 'long', timeStyle: 'short' })
-		},
 
 		scheduleDateFormat() {
 			return (new Date(this.scheduleTime * 1000)).toLocaleString(getLanguage(), { dateStyle: 'long', timeStyle: 'short' })
 		},
 
-		dateRelative() {
-			const diff = new Date() - this.dateTime
-			if (diff >= 0 && diff < 45000) {
-				return t('core', 'seconds ago')
-			}
-			return formatRelativeTime(-diff)
-		},
-
 		isVisibleToEveryone() {
 			return this.groups.length === 0
 				|| this.groups.filter(({ id }) => {
diff --git a/src/utils/datetime.utils.js b/src/utils/datetime.utils.js
deleted file mode 100644
index 473dead3..00000000
--- a/src/utils/datetime.utils.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { getCanonicalLocale } from '@nextcloud/l10n'
-
-const locale = getCanonicalLocale()
-
-const relativeTimeFormat = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
-
-/**
- * Format duration in human-readable format.
- * If the unit is not provided, the largest unit is used for rounded duration in milliseconds.
- *
- * @param duration - Duration in the unit
- * @param unit - Unit to format to
- */
-export function formatDuration(duration, unit) {
-	if (!unit) {
-		const { value, unit: largestUnit } = convertMsToLargestTimeUnit(duration)
-		duration = value
-		unit = largestUnit
-	}
-
-	return new Intl.NumberFormat(locale, { style: 'unit', unit, unitDisplay: 'long' }).format(duration)
-}
-
-/**
- * Format duration in human-readable format from now.
- * If the unit is not provided, the largest unit is used for rounded duration in milliseconds.
- *
- * @param dateOrMs - Date or ms to format
- * @param unit - Unit to format to
- */
-export function formatDurationFromNow(dateOrMs, unit) {
-	return formatDuration(+new Date(dateOrMs) - Date.now(), unit)
-}
-
-/**
- * Format relative time duration in human-readable format
- *
- * @param ms - Duration in milliseconds
- */
-export function formatRelativeTime(ms) {
-	const { value, unit } = convertMsToLargestTimeUnit(ms)
-
-	return relativeTimeFormat.format(value, unit)
-}
-
-/**
- * Format relative time duration in human-readable format from now
- *
- * @param dateOrMs - Date or ms to format
- */
-export function formatRelativeTimeFromNow(dateOrMs) {
-	return formatRelativeTime(+new Date(dateOrMs) - Date.now())
-}
-
-/**
- * Convert milliseconds to the largest unit rounded from 0.75 point.
- *
- * @example 123 -> { value: 0, unit: 'second' }
- * @example 1000 -> { value: 1, unit: 'second' }
- * @example 25 * 60 * 60 * 1000 -> { value: 25, unit: 'minute' }
- * @example 35 * 60 * 60 * 1000 -> { value: 35, unit: 'minute' }
- * @example 45 * 60 * 60 * 1000 -> { value: 1, unit: 'hour' }
- * @example 3600000 -> { value: 1, unit: 'hour' }
- * @example 86400000 -> { value: 1, unit: 'day' }
- * @param ms - Duration in milliseconds
- */
-export function convertMsToLargestTimeUnit(ms) {
-	const units = {
-		year: 0,
-		month: 0,
-		day: 0,
-		hour: 0,
-		minute: 0,
-		second: 0,
-	}
-
-	units.second = ms / 1000
-	units.minute = units.second / 60
-	units.hour = units.minute / 60
-	units.day = units.hour / 24
-	units.month = units.day / 30
-	units.year = units.day / 365
-
-	//
-	const round = (value) => Math.abs(value % 1) < 0.75 ? Math.trunc(value) : Math.round(value)
-
-	// Loop from the largest unit to the smallest
-	for (const key in units) {
-		const unit = key
-		// Round the value so 59 min 59 sec 999 ms is 1 hour and not 59 minutes
-		const rounded = round(units[unit])
-		// Return the first non-zero unit
-		if (rounded !== 0) {
-			return {
-				value: rounded,
-				unit,
-			}
-		}
-	}
-
-	// now
-	return {
-		value: 0,
-		unit: 'second',
-	}
-}
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 8a050cbf..872ca2f7 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -16,10 +16,10 @@
 </template>
 
 <script>
-import NcDashboardWidget from '@nextcloud/vue/dist/Components/NcDashboardWidget.js'
+import NcDashboardWidget from '@nextcloud/vue/components/NcDashboardWidget'
 import { loadState } from '@nextcloud/initial-state'
+import { formatRelativeTime } from '@nextcloud/l10n'
 import { generateUrl, imagePath } from '@nextcloud/router'
-import { formatRelativeTimeFromNow } from '../utils/datetime.utils.js'
 
 export default {
 	name: 'Dashboard',
@@ -45,7 +45,7 @@ export default {
 					overlayIconUrl: imagePath('announcementcenter', 'empty.svg'),
 					subText: t('announcementcenter', '{author}, {timestamp}', {
 						author: item.author,
-						timestamp: formatRelativeTimeFromNow(item.time * 1000),
+						timestamp: formatRelativeTime(item.time * 1000, { ignoreSeconds: true }),
 					}, null, { escape: false, sanitize: false }),
 				}
 			})

From 41d84325560c786f6ac5913a71eb747c4b362803 Mon Sep 17 00:00:00 2001
From: Joas Schilling <coding@schilljs.com>
Date: Fri, 20 Jun 2025 13:16:07 +0200
Subject: [PATCH 2/2] fix(format): Adjust the relative date format

Signed-off-by: Joas Schilling <coding@schilljs.com>
---
 src/Components/Announcement.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Components/Announcement.vue b/src/Components/Announcement.vue
index a7fe4914..053c1c98 100644
--- a/src/Components/Announcement.vue
+++ b/src/Components/Announcement.vue
@@ -22,6 +22,7 @@
 					<span v-if="isScheduled" :title="scheduledLabel">{{ scheduledLabel }}</span>
 					<NcDateTime v-else
 						ignore-seconds
+						:format="{ timeStyle: 'short', dateStyle: 'long' }"
 						:timestamp="time * 1000" />
 
 					<template v-if="isAdmin">