From 1da503eb11f9eb01d0c44c9779cee3c0d135f2e1 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 9 Jul 2023 20:46:53 -0700
Subject: [PATCH] feat: :sparkles: Timestamps on announcements

Closes #10453
---
 packages/client/src/components/MkAnnouncement.vue | 11 +++++++++++
 packages/client/src/pages/announcements.vue       | 13 +++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkAnnouncement.vue b/packages/client/src/components/MkAnnouncement.vue
index 24bf886dd..bd1091b7f 100644
--- a/packages/client/src/components/MkAnnouncement.vue
+++ b/packages/client/src/components/MkAnnouncement.vue
@@ -5,6 +5,13 @@
 				<MkSparkle v-if="isGoodNews">{{ title }}</MkSparkle>
 				<p v-else>{{ title }}</p>
 			</div>
+			<div :class="$style.time">
+				<MkTime :time="announcement.createdAt" />
+				<div v-if="announcement.updatedAt">
+					{{ i18n.ts.updatedAt }}:
+					<MkTime :time="announcement.createdAt" />
+				</div>
+			</div>
 			<Mfm :text="text" />
 			<img
 				v-if="imageUrl != null"
@@ -68,6 +75,10 @@ const gotIt = () => {
 	}
 }
 
+.time {
+	font-size: 0.8rem;
+}
+
 .gotIt {
 	margin: 8px 0 0 0;
 }
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index 8e9975020..cc62ce0f5 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -15,8 +15,13 @@
 					class="_card announcement"
 				>
 					<div class="_title">
-						<span v-if="$i && !announcement.isRead">🆕 </span
-						>{{ announcement.title }}
+						<span v-if="$i && !announcement.isRead">🆕 </span>
+						<h3>{{ announcement.title }}</h3>
+						<MkTime :time="announcement.createdAt" />
+						<div v-if="announcement.updatedAt">
+							{{ i18n.ts.updatedAt }}:
+							<MkTime :time="announcement.createdAt" />
+						</div>
 					</div>
 					<div class="_content">
 						<Mfm :text="announcement.text" />
@@ -76,6 +81,10 @@ definePageMetadata({
 			margin-bottom: var(--margin);
 		}
 
+		> ._title {
+			padding: 14px 32px !important;
+		}
+
 		> ._content {
 			> img {
 				display: block;