Redesign seen assignments feature (#160)

This shows seen assignments in a more legible left-highlighted border with a new badge indicator as well. It moves the "mark as seen" button to a floating position at the bottom of the screen to make it harder to miss. When logging in on a new device it will no longer mark all existing assignments as new.

Author: PurelyAnecdotal

src/routes/(authed)/grades/[index]/+page.svelte

@@ -326,24 +326,6 @@
 		</Alert>
 	{/if}
 
-	{#if unseenAssignments.length > 0 && !hypotheticalMode}
-		<div transition:fade={{ duration: 200 }} class="mt-4">
-			<Alert color="green" border class="mx-4 flex items-center justify-between p-2 text-base">
-				{unseenAssignments.length} new assignments
-				<Button
-					color="green"
-					size="sm"
-					onclick={() => {
-						unseenAssignments.forEach(({ id }) => seenAssignmentIDs.add(id));
-						saveSeenAssignments();
-					}}
-				>
-					Mark as seen
-				</Button>
-			</Alert>
-		</div>
-	{/if}
-
 	<div class="m-4 flex flex-wrap items-center gap-2">
 		<Checkbox bind:checked={hypotheticalMode}>
 			<div id="hypothetical-toggle" class="mr-2 flex items-center">
@@ -400,6 +382,30 @@
 			</Alert>
 		</div>
 	{/if}
+
+	{#if unseenAssignments.length > 0 && !hypotheticalMode}
+		<div transition:fade={{ duration: 200 }} class="sticky bottom-8 flex justify-center">
+			<Alert
+				color="gray"
+				border
+				class="mx-4 flex w-fit items-center justify-between border-1 p-2 pl-3 text-base shadow-lg/30 dark:border-gray-600"
+			>
+				{unseenAssignments.length} new assignments
+				<Button
+					color="green"
+					size="sm"
+					outline
+					class="cursor-pointer"
+					onclick={() => {
+						unseenAssignments.forEach(({ id }) => seenAssignmentIDs.add(id));
+						saveSeenAssignments();
+					}}
+				>
+					Mark as seen
+				</Button>
+			</Alert>
+		</div>
+	{/if}
 {/if}
 
 {#snippet assignmentList(filter?: (assignment: Assignment) => boolean)}

src/routes/(authed)/grades/[index]/AssignmentCard.svelte

@@ -79,7 +79,7 @@
 
 	const percentageChange = $derived(Math.round((gradePercentageChange ?? 0) * 100) / 100);
 
-	const border = $derived(unseen ? 'dark:border-t-green-600 border-t-4' : '');
+	const border = $derived(unseen ? 'dark:border-l-green-600 border-l-4' : '');
 
 	let commentsVisible = $state(false);
 	const toggleComments = () => {
@@ -180,6 +180,9 @@
 		{#if date}
 			<DateBadge {date} />
 		{/if}
+		{#if unseen}
+			<Badge border color="green">New</Badge>
+		{/if}
 	</div>
 
 	<div class="mr-2 ml-auto flex shrink-0 items-center gap-2">

src/routes/(authed)/grades/gradebook.svelte.ts

@@ -117,6 +117,20 @@ export const loadGradebooks = async () => {
 
 	// Save the state to localStorage
 	saveGradebooksState();
+
+	// If there aren't any seen assignment ids saved, mark all assignments as seen
+	if (seenAssignmentIDs.size === 0) {
+		gradebooksState.records.forEach((record) =>
+			record?.data?.Courses.Course.map((course) => course.Marks)
+				.filter((marks) => marks !== '')
+				.forEach((marks) =>
+					marks.Mark.Assignments.Assignment?.forEach((assignment) =>
+						seenAssignmentIDs.add(assignment._GradebookID)
+					)
+				)
+		);
+		saveSeenAssignments();
+	}
 };
 
 export const showGradebook = async (overrideIndex?: number, forceRefresh = false) => {