Add a new setting about overdue homework

src/lib/components/assignment/AssignmentGrid/AssignmentBox.svelte

@@ -14,7 +14,7 @@
 	import { updateAssignment } from '$lib/dlool/assignments/update';
 	import Modal from '$lib/components/modal/Modal.svelte';
 	import Store from '$lib/components/utils/Store.svelte';
-	import { currentCustomDate, sort } from '$lib/utils/dates/custom';
+	import { currentCustomDate, customDateToNormal } from '$lib/utils/dates/custom';
 	import { useAuth } from '$lib/utils/store/auth';
 	import { downloadUrl, asyncRequestAnimationFrame } from '$lib/utils/dom';
 
@@ -36,14 +36,19 @@
 	const state: Writable<State> = writable({ view: 'read' });
 
 	const transparencyOfOverdue = svocal('settings.homework.transparency');
+	const overdueAfterDays = svocal('settings.homework.overdue');
 
 	const queryStore = writable({ school, classes: [assignment.class.name] });
 	$: queryStore.update((props) => ({ ...props, school }));
 	$: queryStore.update((props) => ({ ...props, classes: [assignment.class.name] }));
 
 	const { isLoggedIn, isInClass } = useAuth({ query: queryStore });
 
-	$: isOverdue = sort(assignment.due, currentCustomDate()) === -1;
+	$: overdueInDays =
+		(customDateToNormal(assignment.due).getTime() -
+			customDateToNormal(currentCustomDate()).getTime()) /
+		(1000 * 60 * 60 * 24);
+	$: isOverdue = overdueInDays <= -1 * $overdueAfterDays;
 
 	const dispatch = createEventDispatcher<{
 		delete: null;

src/lib/components/input/date/CalInner.svelte

@@ -59,10 +59,14 @@
 	{#each { length: getDaysInMonth(displayMonth) } as _, ind}
 		{@const isTooEarly = isEarliestMonth && (earliest?.day ?? Infinity) >= ind + 2}
 		{@const isTooLate = isLatestMonth && (latest?.day ?? -Infinity) <= ind + 1}
+		{@const now = new Date()}
+		{@const todaysDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1)}
+		{@const displayDate = new Date(displayMonth.getFullYear(), displayMonth.getMonth(), ind)}
+		{@const isToday = displayDate.getTime() === todaysDate.getTime()}
 
 		<button
 			class="
-					flex aspect-square items-center justify-center rounded-sm p-1.5
+					flex aspect-square items-center justify-center rounded-sm p-0.5
 					hover:bg-zinc-200 focus:bg-zinc-200
 					disabled:opacity-50
 					dark:hover:bg-zinc-800 dark:focus:bg-zinc-800
@@ -77,7 +81,12 @@
 				});
 			}}
 		>
-			{ind + 1}
+			<div
+				class="flex aspect-square h-full w-full items-center justify-center rounded-full p-1"
+				class:bg-red-500={isToday}
+			>
+				{ind + 1}
+			</div>
 		</button>
 	{/each}
 </div>

src/lib/components/settings/RangeSettings.svelte

@@ -2,32 +2,53 @@
 	import type { Readable } from 'svelte/store';
 	import Store from '../utils/Store.svelte';
 	import { self } from '$lib/utils/utils';
+	import QuickAction from '../buttons/QuickAction.svelte';
+	import { QuestionMarkCircle } from 'svelte-hero-icons';
+	import { slide } from 'svelte/transition';
+	import { animationLength } from '$lib/utils/store/animation';
 
 	export let label: Readable<string>;
 	export let value: number;
+	export let description: Readable<string> | null = null;
 
 	export let min = 0;
 	export let max = 100;
 	export let step = 1;
 
 	export let valueFmt: (val: number) => string | number = self;
+
+	let showDescription = false;
 </script>
 
-<div class="flex items-center justify-between gap-2">
-	<span>
-		<Store store={label} />
-	</span>
+<div class="flex flex-col gap-2">
+	<div class="flex items-center justify-between gap-2">
+		<span class="flex items-center gap-1">
+			<Store store={label} />
+			{#if description}
+				<QuickAction
+					icon={QuestionMarkCircle}
+					small
+					on:click={() => (showDescription = !showDescription)}
+				/>
+			{/if}
+		</span>
 
-	<span class="flex items-center gap-2">
-		<input
-			{min}
-			{max}
-			{step}
-			bind:value
-			type="range"
-			class="my-4 h-1 cursor-pointer appearance-none rounded-md bg-emerald-400 dark:bg-emerald-600"
-		/>
+		<span class="flex items-center gap-2">
+			<input
+				{min}
+				{max}
+				{step}
+				bind:value
+				type="range"
+				class="my-4 h-1 cursor-pointer appearance-none rounded-md bg-emerald-400 dark:bg-emerald-600"
+			/>
 
-		<span>{valueFmt(value)}</span>
-	</span>
+			<span>{valueFmt(value)}</span>
+		</span>
+	</div>
+	{#if description && showDescription}
+		<div transition:slide={{ duration: $animationLength }} class="text-gray-500 dark:text-gray-400">
+			<Store store={description} />
+		</div>
+	{/if}
 </div>

src/lib/locales/de.ts

@@ -565,12 +565,19 @@ const de = {
 	'settings.assignments': 'Hausaufgaben',
 	'settings.assignments.title': 'Hausaufgaben Einstellungen',
 	'settings.assignments.transparency': 'Transparenz überfälliger Hausaufgaben',
+	'settings.assignments.transparency.description':
+		'Überfällige Hausaufgaben werden gräulich, sodass sie  nicht zu sehr auffallen und Du dich auf die wichtigen konzentrieren kannst. Ein wert von 0% blendet die Hausaufgabe aus.',
+	'settings.assignments.overdueAfterDays': 'Tage bis es überfällig ist',
+	'settings.assignments.overdueAfterDays.description':
+		'Wieviele Tage nach dem Datum bis wann die Hausaufgabe fällig war soll sie als überfällig angesehen werden. Bei 0 wird die Hausaufgabe ausgegraut ab dem Tag an dem Du sie erledigt haben solltest, bei 1 ab dem Tag danach...',
 	'settings.assignments.presets': 'Voreinstellungen für neue Hausaufgaben',
 	'settings.assignments.presets.new': 'Neues hinzufügen',
 	'settings.assignments.default': 'Standard Fächer für Kurse',
 	'settings.assignments.default.class.placeholder': 'Klasse/Kurs',
 	'settings.assignments.default.class.subject': 'Fach',
 	'settings.assignments.default.smart': 'Automatische Facherkennung',
+	'settings.assignments.default.smart.description':
+		'Anhand des Kurs namens kann automatisch das Fach erkannt werden, somit reicht es nur den Kurs einzugeben. Falls Du in einem klassischem Klassenverband bist wird das Fach nicht automatisch ausgefüllt.',
 
 	'settings.icon': 'App-Icon',
 	'settings.description':

src/lib/locales/en.ts

@@ -553,12 +553,19 @@ const en = {
 	'settings.assignments': 'Assignments',
 	'settings.assignments.title': 'Assignment-Settings',
 	'settings.assignments.transparency': 'transparency of overdue assignments',
+	'settings.assignments.transparency.description':
+		"Overdue homework can be slightly transparent so it isn't too present and you can focus on the important homework. A value of 0% hides the homework",
+	'settings.assignments.overdueAfterDays': 'Days until it is overdue',
+	'settings.assignments.overdueAfterDays.description':
+		'How many days after the day the homework was due should it be considered overdue. A value of 0 means that it is overdue on the date it is due to, a value of 1 means it is overdue one day after that...',
 	'settings.assignments.presets': 'Presets for new assignments',
 	'settings.assignments.presets.new': 'Add a new one',
 	'settings.assignments.default': 'Default subjects for courses',
 	'settings.assignments.default.class.placeholder': 'Course',
 	'settings.assignments.default.class.subject': 'Subject',
 	'settings.assignments.default.smart': 'Automatic subject detection',
+	'settings.assignments.default.smart.description':
+		'Based on the course name the subject can be detected (e.g. Math class has the subject Math).',
 
 	'settings.icon': 'App-Icon',
 	'settings.description':

src/lib/utils/store/svocal.ts

@@ -35,6 +35,7 @@ const sv = {
 	],
 	'dlool.ownUserDetails': ['dlool.ownUserDetails', () => null as null | OwnUserDetails],
 	'settings.homework.transparency': ['settings.homework.transparency', () => 0.6],
+	'settings.homework.overdue': ['settings.homework.overdue', () => 1],
 	'settings.color': ['settings.color', () => ({}) as Record<string, string>],
 	'settings.color.showHex': ['settings.color.showHex', () => false],
 	'settings.timetable': [

src/routes/profile/+page.svelte

@@ -45,7 +45,7 @@
 		<div class="flex justify-center">
 			<div class="flex flex-col items-center gap-2 px-3">
 				<div
-					class="flex aspect-square items-center justify-center rounded-full bg-zinc-300 p-5 shadow"
+					class="flex aspect-square items-center justify-center rounded-full bg-zinc-300 p-5 shadow dark:bg-zinc-600"
 				>
 					<Icon src={User} class="w-16" small />
 				</div>

src/routes/settings/homework/+page.svelte

@@ -20,6 +20,7 @@
 	import { settingsHeader } from '$lib/stores';
 
 	const homeworkTransparency = svocal('settings.homework.transparency');
+	const overdueAfterDays = svocal('settings.homework.overdue');
 	const homeworkPresets = svocal('settings.homeworkPresets');
 	const defaultSubjects = svocal('settings.homework.defaultSubject');
 	const smartSubjects = svocal('settings.homework.smart-subjects');
@@ -39,14 +40,28 @@
 
 	<RangeSettings
 		label={i('settings.assignments.transparency')}
+		description={i('settings.assignments.transparency.description')}
 		bind:value={$homeworkTransparency}
 		min={0}
 		max={1}
 		step={0.05}
 		valueFmt={(num) => `${Math.round(num * 100)}%`}
 	/>
 
-	<BoolSetting label={i('settings.assignments.default.smart')} bind:value={$smartSubjects} />
+	<RangeSettings
+		label={i('settings.assignments.overdueAfterDays')}
+		description={i('settings.assignments.overdueAfterDays.description')}
+		bind:value={$overdueAfterDays}
+		min={0}
+		max={3}
+		step={1}
+	/>
+
+	<BoolSetting
+		label={i('settings.assignments.default.smart')}
+		description={i('settings.assignments.default.smart.description')}
+		bind:value={$smartSubjects}
+	/>
 
 	<div class="flex justify-between">
 		<span><Store store={i('settings.assignments.presets')} /></span>