From b51d9a62861dd96759d50ddae6dfcb286f063188 Mon Sep 17 00:00:00 2001
From: anatoleam <me@anatole.dev>
Date: Thu, 7 Dec 2023 18:30:57 +0100
Subject: [PATCH] add time elapsed to mod request cards

---
 src/views/admin/ModQueue/ModRequestCard.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/views/admin/ModQueue/ModRequestCard.vue b/src/views/admin/ModQueue/ModRequestCard.vue
index 3b3f5704..109b00d1 100644
--- a/src/views/admin/ModQueue/ModRequestCard.vue
+++ b/src/views/admin/ModQueue/ModRequestCard.vue
@@ -51,6 +51,11 @@
 						<EmoteTagList :emote="target" />
 					</UiFloating>
 				</div>
+
+				<div v-if="request.created_at" class="timestamp">
+					<Icon size="lg" icon="clock" />
+					<span>{{ formatDistance(new Date(request.created_at), Date.now(), { addSuffix: true }) }}</span>
+				</div>
 			</div>
 		</template>
 	</div>
@@ -68,6 +73,7 @@ import Icon from "@/components/utility/Icon.vue";
 import UserTag from "@/components/utility/UserTag.vue";
 import ModRequestCardDetailsModalVue from "./ModRequestCardDetailsModal.vue";
 import UiFloating from "@/ui/UiFloating.vue";
+import formatDistance from "date-fns/formatDistance";
 
 export interface ModRequestAttr {
 	title: string;
@@ -353,6 +359,11 @@ div.mod-request-card {
 				visibility: hidden;
 			}
 		}
+
+		.timestamp {
+			display: grid;
+			grid-template-columns: 1.5rem 1fr;
+		}
 	}
 }
 </style>