fix: replace moment.calendar() with Intl formatters

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/CalendarEventsDialog.vue

@@ -8,7 +8,6 @@ import type { Conversation, Participant } from '../types/index.ts'
 
 import { showSuccess } from '@nextcloud/dialogs'
 import { n, t } from '@nextcloud/l10n'
-import moment from '@nextcloud/moment'
 import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 import { usernameToColor } from '@nextcloud/vue/functions/usernameToColor'
 import debounce from 'debounce'
@@ -33,6 +32,7 @@ import SelectableParticipant from './BreakoutRoomsEditor/SelectableParticipant.v
 import CalendarEventSmall from './UIShared/CalendarEventSmall.vue'
 import ContactSelectionBubble from './UIShared/ContactSelectionBubble.vue'
 import SearchBox from './UIShared/SearchBox.vue'
+import StaticDateTime from './UIShared/StaticDateTime.vue'
 import TransitionWrapper from './UIShared/TransitionWrapper.vue'
 import { ATTENDEE, CONVERSATION } from '../constants.ts'
 import { hasTalkFeature } from '../services/CapabilitiesManager.ts'
@@ -69,7 +69,7 @@ const upcomingEvents = computed(() => {
 		.sort((a, b) => (a.start && b.start) ? (a.start - b.start) : 0)
 		.map((event) => {
 			const start = event.start
-				? (event.start <= now) ? t('spreed', 'Now') : moment(event.start * 1000).calendar()
+				? (event.start <= now) ? t('spreed', 'Now') : event.start * 1000
 				: ''
 			const color = calendars.value[event.calendarUri]?.color ?? usernameToColor(event.calendarUri).color
 
@@ -356,7 +356,7 @@ async function submitNewMeeting() {
 						<span class="upcoming-meeting__header">
 							{{ t('spreed', 'Next meeting') }}
 						</span>
-						<span> {{ upcomingEvents[0].start }} </span>
+						<StaticDateTime :time="upcomingEvents[0].start" calendar />
 					</template>
 				</NcButton>
 			</template>

src/components/RightSidebar/RightSidebarContent.vue

@@ -11,7 +11,6 @@ import type {
 } from '../../types/index.ts'
 
 import { t } from '@nextcloud/l10n'
-import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
 import { useIsDarkTheme } from '@nextcloud/vue/composables/useIsDarkTheme'
 import { computed, ref, watch } from 'vue'
@@ -38,7 +37,7 @@ import { convertToUnix } from '../../utils/formattedTime.ts'
 type MutualEvent = {
 	uri: DashboardEvent['eventLink']
 	name: DashboardEvent['eventName']
-	start: string
+	start: string | number
 	href: DashboardEvent['eventLink']
 	color: string
 }
@@ -139,7 +138,7 @@ const mutualEventsInformation = computed<MutualEvent[]>(() => {
 	const now = convertToUnix(Date.now())
 	return groupwareStore.mutualEvents[token.value].map((event) => {
 		const start = event.start
-			? (event.start <= now) ? t('spreed', 'Now') : moment(event.start * 1000).calendar()
+			? (event.start <= now) ? t('spreed', 'Now') : event.start * 1000
 			: ''
 		return {
 			uri: event.eventLink,

src/components/UIShared/CalendarEventSmall.vue

@@ -6,10 +6,11 @@
 <script setup lang="ts">
 import { t } from '@nextcloud/l10n'
 import IconReload from 'vue-material-design-icons/Reload.vue'
+import StaticDateTime from './StaticDateTime.vue'
 
 const props = defineProps<{
 	name: string | null
-	start: string | null
+	start: string | number
 	color: string
 	isRecurring?: boolean
 	href?: string
@@ -31,7 +32,7 @@ const props = defineProps<{
 					<span class="calendar-event__header-text">{{ name }}</span>
 					<IconReload v-if="isRecurring" :size="13" />
 				</span>
-				<span>{{ start }}</span>
+				<StaticDateTime :time="start" calendar />
 			</span>
 		</a>
 	</li>

src/components/UIShared/StaticDateTime.vue

@@ -4,24 +4,42 @@
 -->
 
 <script setup lang="ts">
-import { getLanguage, t } from '@nextcloud/l10n'
+import { getCanonicalLocale, getLanguage, t } from '@nextcloud/l10n'
 import { useFormatTime } from '@nextcloud/vue/composables/useFormatDateTime'
 import { computed } from 'vue'
-import { getRelativeDay } from '../../utils/formattedTime.ts'
+import { getDiffInDays, getRelativeDay } from '../../utils/formattedTime.ts'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	time: string | number
-}>()
+	calendar?: boolean
+}>(), {
+	calendar: false,
+})
+
+const isValidDate = computed(() => !isNaN(new Date(props.time).valueOf()))
 
 const absoluteDateOptions = computed(() => {
-	const isSameYear = new Date(+props.time).getFullYear() === new Date().getFullYear()
+	const date = new Date(+props.time)
+	const isSameYear = date.getFullYear() === new Date().getFullYear()
+	const diffInDays = getDiffInDays(date)
+
+	const locale = props.calendar ? getCanonicalLocale() : getLanguage()
 	const format: Intl.DateTimeFormatOptions = {
 		dateStyle: undefined,
-		year: !isSameYear ? 'numeric' : undefined,
-		month: 'long',
-		day: 'numeric',
+		timeStyle: undefined,
 	}
-	return { locale: getLanguage(), format }
+
+	if (props.calendar && Math.abs(diffInDays) <= 6) {
+		// Show weekday and time for nearest 6 days
+		format.hour = 'numeric'
+		format.minute = 'numeric'
+	} else {
+		format.year = !isSameYear ? 'numeric' : undefined
+		format.month = 'long'
+		format.day = 'numeric'
+	}
+
+	return { locale, format }
 })
 const absoluteDate = useFormatTime(+props.time, absoluteDateOptions)
 
@@ -29,7 +47,12 @@ const absoluteDate = useFormatTime(+props.time, absoluteDateOptions)
  * Generate the date header between the messages, like "Today, November 11", "3 days ago, November 8", "November 5, 2024"
  */
 const datetimeString = computed(() => {
-	const relativeDate = getRelativeDay(+props.time, { limitToWeek: true })
+	if (!isValidDate.value) {
+		// Custom string, pass as-is
+		return props.time
+	}
+
+	const relativeDate = getRelativeDay(+props.time, { limitToWeek: true, showWeekDay: props.calendar })
 
 	if (relativeDate) {
 		// TRANSLATORS: <Today>, <March 18, 2024>

src/composables/useConversationInfo.ts

@@ -6,13 +6,12 @@
 import type { ComputedRef, Ref } from 'vue'
 import type { ChatMessage, Conversation } from '../types/index.ts'
 
-import { t } from '@nextcloud/l10n'
-import moment from '@nextcloud/moment'
+import { getCanonicalLocale, t } from '@nextcloud/l10n'
 import { computed, ref, toRef } from 'vue'
 import { CONVERSATION, MESSAGE, PARTICIPANT } from '../constants.ts'
 import { useChatStore } from '../stores/chat.ts'
 import { getEventTimeRange } from '../utils/conversation.ts'
-import { futureRelativeTime, ONE_DAY_IN_MS } from '../utils/formattedTime.ts'
+import { futureRelativeTime, getDiffInDays, ONE_DAY_IN_MS } from '../utils/formattedTime.ts'
 import { getDisplayNameWithFallback } from '../utils/getDisplayName.ts'
 import { getMessageIcon } from '../utils/getMessageIcon.ts'
 import { parseToSimpleMessage } from '../utils/textParse.ts'
@@ -118,20 +117,27 @@ export function useConversationInfo({
 				return message.systemMessage === '' && message.messageType !== MESSAGE.TYPE.COMMENT_DELETED
 			})
 
+			let eventTime = ''
 			if (!hasHumanMessage && startTime - Date.now() < ONE_DAY_IN_MS) {
-				return {
-					actor: null,
-					icon: null,
-					message: futureRelativeTime(startTime),
-					title: futureRelativeTime(startTime),
-				}
+				eventTime = futureRelativeTime(startTime)
 			} else if (!hasHumanMessage) {
-				return {
-					actor: null,
-					icon: null,
-					message: moment(startTime).calendar(),
-					title: moment(startTime).calendar(),
-				}
+				const date = new Date(startTime)
+				const isSameYear = date.getFullYear() === new Date().getFullYear()
+				const diffInDays = getDiffInDays(date)
+
+				const format: Intl.DateTimeFormatOptions = (Math.abs(diffInDays) <= 6)
+					// Show weekday and time for nearest 6 days
+					? { weekday: 'long', hour: 'numeric', minute: 'numeric' }
+					: { year: !isSameYear ? 'numeric' : undefined, month: 'long', day: 'numeric' }
+
+				eventTime = new Intl.DateTimeFormat(getCanonicalLocale(), format).format(date)
+			}
+
+			return {
+				actor: null,
+				icon: null,
+				message: eventTime,
+				title: eventTime,
 			}
 		}
 

src/utils/formattedTime.ts

@@ -13,6 +13,8 @@ const ONE_DAY_IN_MS = 86400000
 const relativeTimeFormatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'always' })
 /** 'yesterday', 'tomorrow' */
 const idiomaticTimeFormatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'auto' })
+/** 'friday', 'saturday' */
+const weekdayTimeFormatter = new Intl.DateTimeFormat(getLanguage(), { weekday: 'long' })
 
 /**
  * Converts the given time to UNIX timestamp
@@ -78,16 +80,11 @@ function futureRelativeTime(time: number): string {
 }
 
 /**
- * Calculates the relative time (in days) from now in user language
+ * Calculates the difference (in days) from now (positive for future time, negative for the past)
  *
  * @param dateOrTimestamp Date object to calculate from (or timestamp in ms)
- * @param options function options
- * @param options.limitToWeek whether to return prefix for interval larger than a week
  */
-function getRelativeDay(
-	dateOrTimestamp: Date | number,
-	{ limitToWeek } = { limitToWeek: false },
-): string {
+function getDiffInDays(dateOrTimestamp: Date | number): number {
 	const date = new Date(dateOrTimestamp)
 	const currentDate = new Date()
 
@@ -95,16 +92,40 @@ function getRelativeDay(
 	date.setHours(0, 0, 0, 0)
 	currentDate.setHours(0, 0, 0, 0)
 
-	const diffInDays = (+date - +currentDate) / ONE_DAY_IN_MS
+	return (+date - +currentDate) / ONE_DAY_IN_MS
+}
+
+/**
+ * Calculates the relative time (in days) from now in user language
+ *
+ * @param dateOrTimestamp Date object to calculate from (or timestamp in ms)
+ * @param options function options
+ * @param options.limitToWeek whether to return prefix for interval larger than a week
+ * @param options.showWeekDay whether to return weekday names for -6 to +6 days range
+ */
+function getRelativeDay(
+	dateOrTimestamp: Date | number,
+	{ limitToWeek, showWeekDay } = { limitToWeek: false, showWeekDay: false },
+): string {
+	const date = new Date(dateOrTimestamp)
+	const diffInDays = getDiffInDays(date)
 
 	if (limitToWeek) {
 		if (Math.abs(diffInDays) === 7) {
+			if (showWeekDay) {
+				// Do not return the same weekday as the current one
+				return ''
+			}
 			return relativeTimeFormatter.format(diffInDays / 7, 'week')
 		} else if (Math.abs(diffInDays) > 7) {
 			return ''
 		}
 	}
 
+	if (showWeekDay && Math.abs(diffInDays) > 1) {
+		return weekdayTimeFormatter.format(date)
+	}
+
 	return idiomaticTimeFormatter.format(diffInDays, 'day')
 }
 
@@ -112,6 +133,7 @@ export {
 	convertToUnix,
 	formattedTime,
 	futureRelativeTime,
+	getDiffInDays,
 	getRelativeDay,
 	ONE_DAY_IN_MS,
 	ONE_HOUR_IN_MS,