feat: Managing archived status

src/routes/announcements/[slug]/AdminButtons.svelte

@@ -4,9 +4,18 @@
 	export let isEditing: boolean,
 		isCreating,
 		isPreviewing: boolean,
+		archivedAtElement: string | null,
 		showDeleteConfirm: boolean,
 		createAnnouncement,
 		save;
+
+	const toggleArchived = () => {
+		if (archivedAtElement) {
+			archivedAtElement = null;
+		} else {
+			archivedAtElement = new Date().toISOString().split('.')[0].slice(0, -3);
+		}
+	};
 </script>
 
 <div>
@@ -16,9 +25,19 @@
 			icon={isPreviewing ? 'hide' : 'show'}
 			on:click={() => (isPreviewing = !isPreviewing)}
 		/>
+		<Button
+			type="icon"
+			icon={archivedAtElement ? 'unarchive' : 'archive'}
+			on:click={toggleArchived}
+		/>
 		<Button type="icon" icon={'close'} on:click={() => (isEditing = false)} />
 		<Button type="icon" icon={'check'} on:click={save} />
 	{:else if isCreating}
+		<Button
+			type="icon"
+			icon={archivedAtElement ? 'unarchive' : 'archive'}
+			on:click={toggleArchived}
+		/>
 		<Button
 			type="icon"
 			icon={isPreviewing ? 'hide' : 'show'}

src/routes/announcements/[slug]/Announcement.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { admin, queries } from '$data/api';
+	import { admin } from '$data/api';
 	import Button from '$lib/components/Button.svelte';
 	import Dialogue from '$lib/components/Dialogue.svelte';
 	import { admin_login } from '$lib/stores';
@@ -25,6 +25,7 @@
 	let authorElement: string = announcementContent?.author ?? '';
 	let contentElement: string = announcementContent?.content ?? '';
 	let createdAtElement: string = announcementContent?.created_at ?? '';
+	let archivedAtElement: string = announcementContent?.archived_at ?? null;
 	let attachmentsElement: string[] = announcementContent?.attachments ?? [];
 
 	const addAttachment = () => {
@@ -111,6 +112,8 @@
 					{isEditing}
 					{isPreviewing}
 					createdAt={announcementContent.created_at}
+					archivedAt={announcementContent.archived_at}
+					bind:archivedAtElement
 					bind:createdAtElement
 				/>
 				·
@@ -132,6 +135,7 @@
 				bind:isEditing
 				bind:isPreviewing
 				bind:showDeleteConfirm
+				bind:archivedAtElement
 				{createAnnouncement}
 				{save}
 			/>

src/routes/announcements/[slug]/Date.svelte

@@ -1,23 +1,67 @@
 <script lang="ts">
 	import moment from 'moment';
 
-	export let isEditing, isCreating, isPreviewing, createdAt, createdAtElement: string;
+	export let isEditing,
+		isCreating,
+		isPreviewing,
+		createdAt,
+		createdAtElement: string,
+		archivedAt,
+		archivedAtElement: string;
 
 	// Ensure createdAtElement is properly formatted for the datetime-local input
-	if (createdAtElement) createdAtElement = createdAtElement.split('.')[0];
+	if (createdAtElement) {
+		createdAtElement = createdAtElement.split('.')[0];
+	} else {
+		createdAtElement = new Date().toISOString().split('.')[0].slice(0, -3);
+	}
 </script>
 
 {#if (isEditing || isCreating) && !isPreviewing}
-	<input type="datetime-local" max="9999-12-31T23:59" bind:value={createdAtElement} />
+	<span>
+		<input type="datetime-local" max="9999-12-31T23:59" bind:value={createdAtElement} />
+		{#if archivedAtElement}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				height="24px"
+				viewBox="0 -960 960 960"
+				width="24px"
+				fill="#ACC1D2"
+			>
+				<path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z" />
+			</svg>
+			<input type="datetime-local" max="9999-12-31T23:59" bind:value={archivedAtElement} />
+		{/if}
+	</span>
 {:else}
 	<span>
 		{isPreviewing
 			? moment(createdAtElement).format('MMMM D, YYYY [at] h:mm A')
 			: moment(createdAt).format('MMMM D, YYYY [at] h:mm A')}
+		{#if archivedAt || archivedAtElement}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				height="24px"
+				viewBox="0 -960 960 960"
+				width="24px"
+				fill="#ACC1D2"
+			>
+				<path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z" />
+			</svg>
+			{isPreviewing
+				? moment(archivedAtElement).format('MMMM D, YYYY [at] h:mm A')
+				: moment(archivedAt).format('MMMM D, YYYY [at] h:mm A')}
+		{/if}
 	</span>
 {/if}
 
 <style lang="scss">
+	span {
+		display: inline-flex;
+		align-items: center;
+		gap: 1rem;
+	}
+
 	input {
 		&,
 		&:focus {