From 28d6d620698511964f6e014319f3dfa1b4394345 Mon Sep 17 00:00:00 2001
From: madkarmaa <madkarma99@gmail.com>
Date: Mon, 16 Jun 2025 16:33:05 +0200
Subject: [PATCH] refactor: make clear which date is created/archived

---
 src/lib/components/Divider.svelte           |  4 ++--
 src/routes/announcements/[slug]/Date.svelte | 20 ++++++++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Divider.svelte b/src/lib/components/Divider.svelte
index c2bf716..e5c27ff 100644
--- a/src/lib/components/Divider.svelte
+++ b/src/lib/components/Divider.svelte
@@ -1,5 +1,5 @@
-<script>
-	export let horizontalPadding;
+<script lang="ts">
+	export let horizontalPadding: string;
 </script>
 
 <svg
diff --git a/src/routes/announcements/[slug]/Date.svelte b/src/routes/announcements/[slug]/Date.svelte
index 2cb6a16..2c4dc2a 100644
--- a/src/routes/announcements/[slug]/Date.svelte
+++ b/src/routes/announcements/[slug]/Date.svelte
@@ -23,19 +23,25 @@
 
 {#if (isEditing || isCreating) && !isPreviewing}
 	<span>
-		<input type="datetime-local" max="9999-12-31T23:59" bind:value={createdAtInput} />
+		<label>
+			Created
+			<input type="datetime-local" max="9999-12-31T23:59" bind:value={createdAtInput} />
+		</label>
 		{#if archivedAtInput}
 			<ArrowRight size="24" />
-			<input type="datetime-local" max="9999-12-31T23:59" bind:value={archivedAtInput} />
+			<label>
+				Archived
+				<input type="datetime-local" max="9999-12-31T23:59" bind:value={archivedAtInput} />
+			</label>
 		{/if}
 	</span>
 {:else if displayCreatedAt}
 	<span>
-		{relativeTime(displayCreatedAt)}
+		Created {relativeTime(displayCreatedAt)}
 
 		{#if displayArchivedAt}
 			<ArrowRight size="24" />
-			{relativeTime(displayArchivedAt)}
+			Archived {relativeTime(displayArchivedAt)}
 		{/if}
 	</span>
 {/if}
@@ -48,6 +54,12 @@
 		column-gap: 1rem;
 	}
 
+	label {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
 	input {
 		&,
 		&:focus {