fix: add missing aria label and improve date processing for better translation

Signed-off-by: Dorra Jaouad <[email protected]>

Author: DorraJaouad

src/components/Dashboard/EventCard.vue

@@ -28,7 +28,7 @@ import { useIsInCall } from '../../composables/useIsInCall.js'
 import { useStore } from '../../composables/useStore.js'
 import { CONVERSATION } from '../../constants.ts'
 import type { DashboardEventRoom } from '../../types/index.ts'
-import { formattedTime } from '../../utils/formattedTime.ts'
+import { formattedTime, ONE_DAY_IN_MS } from '../../utils/formattedTime.ts'
 
 const props = defineProps<{
 	eventRoom: DashboardEventRoom,
@@ -57,20 +57,45 @@ const eventDateLabel = computed(() => {
 	}
 	const startDate = new Date(props.eventRoom.start * 1000)
 	const endDate = new Date(props.eventRoom.end * 1000)
-	const startDateString = startDate.toLocaleString(getCanonicalLocale(), { hour: '2-digit', minute: '2-digit' })
-	const endDateString = endDate.toLocaleString(getCanonicalLocale(), { hour: '2-digit', minute: '2-digit' })
-	const dateString = isToday.value
-		? t('spreed', 'Today')
-		: moment(startDate).calendar(null, {
-			nextDay: '[Tomorrow]',
-			nextWeek: 'dddd',
-			sameElse: 'dddd'
-		})
-	return t('spreed', '{dateString} {startDateString} - {endDateString}', {
-		dateString,
-		startDateString,
-		endDateString,
-	})
+	const isToday = startDate.toDateString() === new Date().toDateString()
+	const isTomorrow = startDate.toDateString() === new Date(Date.now() + ONE_DAY_IN_MS).toDateString()
+
+	let time
+	if (startDate.toDateString() === endDate.toDateString()) {
+		if (isToday || isTomorrow) {
+			// show the time only
+			const timeRange = Intl.DateTimeFormat(getCanonicalLocale(), {
+				hour: 'numeric',
+				minute: 'numeric',
+			}).formatRange(startDate, endDate)
+
+			const relativeFormatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
+
+			// TRANSLATORS: e.g. "Tomorrow 10:00 - 11:00"
+			time = t('spreed', '{dayPrefix} {dateTime}', {
+				dayPrefix: isToday ? relativeFormatter.format(0, 'day') : relativeFormatter.format(1, 'day'),
+				dateTime: timeRange
+			})
+		} else {
+			time = Intl.DateTimeFormat(getCanonicalLocale(), {
+				weekday: 'long',
+				hour: 'numeric',
+				minute: 'numeric',
+			}).formatRange(startDate, endDate)
+		}
+	} else {
+		// show the month and the year as well
+		time = Intl.DateTimeFormat(getCanonicalLocale(), {
+			month: 'long',
+			year: 'numeric',
+			day: '2-digit',
+			hour: 'numeric',
+			minute: 'numeric',
+		}).formatRange(startDate, endDate)
+
+	}
+
+	return time
 })
 
 const hasAttachments = computed(() => {
@@ -120,7 +145,7 @@ function handleJoin({ call = false } = {}) {
 			</span>
 		</h4>
 		<p class="event-card__date secondary_text">
-			{{ eventDateLabel }}
+			<span>{{ eventDateLabel }}</span>
 			<template v-if="hasCall">
 				<IconVideo :size="20" :fill-color="'#E9322D'" />
 				<span>{{ elapsedTime }}</span>
@@ -215,6 +240,10 @@ function handleJoin({ call = false } = {}) {
 		display: flex;
 		gap: 2px;
 
+		& > span::first-letter {
+			text-transform: capitalize;
+		}
+
 		& > * {
 			white-space: nowrap;
 			overflow: hidden;
@@ -291,8 +320,6 @@ function handleJoin({ call = false } = {}) {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		font-size: inherit;
-		margin: 0;
 	}
 }