From c7b088ac1835f1616c619a2b96ec6931868720bd Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 20 Apr 2026 18:59:24 +0200
Subject: [PATCH] feat(frontend): introduce TimeDisplay component

---
 frontend/src/components/misc/TimeDisplay.vue | 29 ++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 frontend/src/components/misc/TimeDisplay.vue

diff --git a/frontend/src/components/misc/TimeDisplay.vue b/frontend/src/components/misc/TimeDisplay.vue
new file mode 100644
index 000000000..160aa0f29
--- /dev/null
+++ b/frontend/src/components/misc/TimeDisplay.vue
@@ -0,0 +1,29 @@
+<template>
+	<time
+		v-if="date"
+		v-tooltip="formatDateLong(date)"
+		:datetime="formatISO(date)"
+	>{{ displayText }}</time>
+	<span v-else-if="fallback">{{ fallback }}</span>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import {formatDisplayDate, formatDateSince, formatDateLong, formatISO} from '@/helpers/time/formatDate'
+
+const props = withDefaults(defineProps<{
+	date: Date | string | null | undefined,
+	mode?: 'short' | 'relative',
+	fallback?: string,
+}>(), {
+	mode: 'short',
+	fallback: undefined,
+})
+
+const displayText = computed(() => {
+	if (!props.date) return ''
+	return props.mode === 'relative'
+		? formatDateSince(props.date)
+		: formatDisplayDate(props.date)
+})
+</script>