Add smart auto subjects and more animations

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

@@ -28,7 +28,7 @@
 		</div>
 	{/if}
 
-	<div class="flex flex-col gap-2">
+	<div class="flex w-full flex-col gap-2">
 		<div class="flex items-center gap-2">
 			{#if icon}
 				<Icon src={icon} class="h-6 w-6" mini />
@@ -39,6 +39,8 @@
 
 		<p>{assignment.description}</p>
 
+		<hr class="rounded-full border-zinc-300 dark:border-zinc-600" />
+
 		<div class="flex items-center gap-1 text-sm">
 			<Icon src={Clock} class="h-4 w-4" micro />
 			<Store
@@ -49,6 +51,8 @@
 			/>
 		</div>
 
-		<Updates updates={assignment.updates} />
+		<div class="text-sm">
+			<Updates updates={assignment.updates} />
+		</div>
 	</div>
 </div>

src/lib/components/assignment/SideMenu/CreateAssignmentInner.svelte

@@ -46,10 +46,12 @@
 	import NotTyppable from '$lib/components/select/NotTyppable.svelte';
 	import { self } from '$lib/utils/utils';
 	import { mapObject } from '$lib/utils/objects/map';
+	import { smartSubject } from '$lib/utils/dlool/smartSubject';
 
 	const timetable = svocal('settings.timetable');
 	const presets = svocal('settings.homeworkPresets');
 	const defaultSubjects = svocal('settings.homework.defaultSubject');
+	const smartDetection = svocal('settings.homework.smart-subjects');
 
 	const dispatch = createEventDispatcher<{ submit: CreationPayload }>();
 
@@ -98,7 +100,9 @@
 
 	classInput.subscribe((cl) => {
 		const lowercased = mapObject($defaultSubjects, (key) => key.toLowerCase(), self);
-		subject = lowercased[cl.toLowerCase()] || subject;
+		const smart = $smartDetection ? smartSubject(cl) : undefined;
+
+		subject = lowercased[cl.toLowerCase()] ?? smart ?? subject;
 	});
 
 	wasSuccessfull.subscribe((successfull) => {

src/lib/components/panes/Panes.svelte

@@ -66,7 +66,7 @@
 
 <script lang="ts">
 	import { clamp } from '$lib/utils/numbers/clamp';
-	import { ArrowLeft, ChevronLeft, Icon } from 'svelte-hero-icons';
+	import { ArrowLeft, ChevronLeft, ChevronRight, Icon } from 'svelte-hero-icons';
 	import QuickAction from '../buttons/QuickAction.svelte';
 
 	export let min = 120;
@@ -133,7 +133,7 @@
 		<div class="flex w-full max-w-full flex-col gap-2 overflow-hidden p-1">
 			<div class="hidden md:inline-block" class:md:hidden={showSidebar}>
 				<QuickAction
-					icon={ChevronLeft}
+					icon={ChevronRight}
 					small
 					on:click={() => {
 						showSidebar = true;

src/lib/components/utils/Collapseable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Icon, ChevronDown, ChevronUp } from 'svelte-hero-icons';
+	import { Icon, ChevronDown } from 'svelte-hero-icons';
+	import { slide } from 'svelte/transition';
 	import { localstorage } from 'svocal';
 
 	export let id: string;
@@ -8,13 +9,19 @@
 
 <div class="flex items-center justify-between">
 	<slot name="heading" />
-	<button on:click={() => isExpanded.update((v) => !v)}>
+	<button
+		on:click={() => isExpanded.update((v) => !v)}
+		class:rotate-180={$isExpanded}
+		class="transition-all"
+	>
 		<slot name="button">
-			<Icon src={$isExpanded ? ChevronUp : ChevronDown} mini class="h-6 w-6" />
+			<Icon src={ChevronDown} mini class="h-6 w-6" />
 		</slot>
 	</button>
 </div>
 
 {#if $isExpanded}
-	<slot name="content" />
+	<div transition:slide class="p-0.5">
+		<slot name="content" />
+	</div>
 {/if}

src/lib/components/utils/Updates.svelte

@@ -13,28 +13,40 @@
 	import UpdatedAt from './UpdatedAt.svelte';
 	import QuickAction from '../buttons/QuickAction.svelte';
 	import { ChevronDown, ChevronUp } from 'svelte-hero-icons';
+	import { slide } from 'svelte/transition';
 
 	export let updates: Update[];
 	const showAllEdits = useToggle(false);
 </script>
 
 <div class="flex flex-col">
-	{#each updates
-		.map((data, ind) => ({ ...data, isFirst: ind === 0 }))
-		.reverse()
-		.slice(0, $showAllEdits ? Infinity : 1) as update, ind}
-		{@const isAtTop = ind === 0}
-		{@const type = update.isFirst ? 'created' : 'edited'}
+	<span class="flex w-fit items-center justify-center gap-1" transition:slide>
+		<UpdatedAt
+			type={updates.length === 1 ? 'created' : 'edited'}
+			timestamp={updates[updates.length - 1].time}
+			displayname={updates[updates.length - 1].user.displayname}
+		/>
+		{#if updates.length > 1}
+			<QuickAction
+				icon={$showAllEdits ? ChevronUp : ChevronDown}
+				small
+				on:click={showAllEdits.toggle}
+			/>
+		{/if}
+	</span>
 
-		<span class="flex w-fit justify-center gap-1">
-			<UpdatedAt {type} timestamp={update.time} displayname={update.user.displayname} />
-			{#if isAtTop && updates.length > 1}
-				<QuickAction
-					icon={$showAllEdits ? ChevronUp : ChevronDown}
-					small
-					on:click={showAllEdits.toggle}
-				/>
-			{/if}
-		</span>
-	{/each}
+	{#if $showAllEdits}
+		<div transition:slide>
+			{#each updates
+				.map((data, ind) => ({ ...data, isFirst: ind === 0 }))
+				.reverse()
+				.slice(1) as update}
+				{@const type = update.isFirst ? 'created' : 'edited'}
+
+				<span class="flex w-fit justify-center gap-1" transition:slide>
+					<UpdatedAt {type} timestamp={update.time} displayname={update.user.displayname} />
+				</span>
+			{/each}
+		</div>
+	{/if}
 </div>

src/lib/locales/de.ts

@@ -546,6 +546,7 @@ const de = {
 	'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.save': 'Speichern',
 

src/lib/locales/en.ts

@@ -533,6 +533,7 @@ const en = {
 	'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.save': 'Save',
 

src/lib/utils/dlool/smartSubject.ts

@@ -0,0 +1,59 @@
+/**
+ * TODO:Add english smart subjects
+ */
+
+type SmartDetectRule = {
+	subject: string;
+	pattern: RegExp;
+};
+
+const genRegex = (str: string) => new RegExp(`^${str.toLowerCase()}`);
+
+const exactPairs = [
+	'Chemie',
+	'Physik',
+	'Latein',
+	'Deutsch',
+	'Musik',
+	'Sport',
+	'Spanisch',
+	'Kunst',
+	'Französisch'
+];
+
+const rules: SmartDetectRule[] = [
+	...exactPairs.map((subject) => ({ subject, pattern: genRegex(subject) })),
+	{
+		subject: 'Mathemathik',
+		pattern: /^math?e/
+	},
+	{
+		subject: 'Informatik',
+		pattern: /^info(rmatik)?/
+	},
+	{
+		subject: 'Darstellendes Spiel',
+		pattern: /^(ds|darstellendes\s*spiel)/
+	},
+	{
+		subject: 'PoWi',
+		pattern: /^(powi|politik\s+(und|&)\s+wirtschaft)/
+	},
+	{
+		subject: 'Geschichte',
+		pattern: /^geschi/
+	},
+	{
+		subject: 'Biologie',
+		pattern: /^bio/
+	},
+	{
+		subject: 'Biologie',
+		pattern: /^reli/
+	}
+];
+
+export function smartSubject(course: string) {
+	const found = rules.find(({ pattern }) => pattern.test(course.toLowerCase()));
+	return found?.subject;
+}

src/lib/utils/store/svocal.ts

@@ -66,6 +66,7 @@ const sv = {
 		'settings.homework.defaultSubject',
 		() => ({}) as Record<string, string>
 	],
+	'settings.homework.smart-subjects': ['settings.homework.smart-subjects', () => true],
 	'dlool-version': ['dlool-version', () => '2']
 } as const;
 

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

@@ -16,10 +16,12 @@
 	import { objectEntries } from '$lib/utils/objects/entries';
 	import { replaceKey } from '$lib/utils/objects/replaceKey';
 	import { removeKey } from '$lib/utils/objects/removeKey';
+	import BoolSetting from '$lib/components/settings/BoolSetting.svelte';
 
 	const homeworkTransparency = svocal('settings.homework.transparency');
 	const homeworkPresets = svocal('settings.homeworkPresets');
 	const defaultSubjects = svocal('settings.homework.defaultSubject');
+	const smartSubjects = svocal('settings.homework.smart-subjects');
 
 	onDestroy(() => {
 		if (!browser) return;
@@ -41,6 +43,8 @@
 		valueFmt={(num) => `${Math.round(num * 100)}%`}
 	/>
 
+	<BoolSetting label={i('settings.assignments.default.smart')} bind:value={$smartSubjects} />
+
 	<div class="flex justify-between">
 		<span><Store store={i('settings.assignments.presets')} /></span>