feat: disable animations setting toggle (#442)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/routes/settings/+layout.svelte

@@ -2,7 +2,9 @@
 	import { page } from '$app/state';
 	import FadeWrapper from '$lib/components/fade-wrapper.svelte';
 	import { m } from '$lib/paraglide/messages';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import userStore from '$lib/stores/user-store';
+	import { cn } from '$lib/utils/style';
 	import { LucideExternalLink, LucideSettings } from 'lucide-svelte';
 	import type { Snippet } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
@@ -20,7 +22,7 @@
 
 	const links = [
 		{ href: '/settings/account', label: m.my_account() },
-		{ href: '/settings/audit-log', label: m.audit_log() },		
+		{ href: '/settings/audit-log', label: m.audit_log() }
 	];
 
 	const adminLinks = [
@@ -54,11 +56,12 @@
 						{#each links as { href, label }, i}
 							<a
 								{href}
-								class={`animate-fade-in ${
+								class={cn(
+									!$appConfigStore.disableAnimations && 'animate-fade-in',
 									page.url.pathname.startsWith(href)
 										? 'text-primary bg-card rounded-md px-3 py-1.5 font-medium shadow-sm transition-all'
 										: 'hover:text-foreground hover:bg-muted/70 rounded-md px-3 py-1.5 transition-all hover:-translate-y-[2px] hover:shadow-sm'
-								}`}
+								)}
 								style={`animation-delay: ${150 + i * 75}ms;`}
 							>
 								{label}

frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte

@@ -24,14 +24,16 @@
 		appName: appConfig.appName,
 		sessionDuration: appConfig.sessionDuration,
 		emailsVerified: appConfig.emailsVerified,
-		allowOwnAccountEdit: appConfig.allowOwnAccountEdit
+		allowOwnAccountEdit: appConfig.allowOwnAccountEdit,
+		disableAnimations: appConfig.disableAnimations
 	};
 
 	const formSchema = z.object({
 		appName: z.string().min(2).max(30),
 		sessionDuration: z.number().min(1).max(43200),
 		emailsVerified: z.boolean(),
-		allowOwnAccountEdit: z.boolean()
+		allowOwnAccountEdit: z.boolean(),
+		disableAnimations: z.boolean()
 	});
 
 	const { inputs, ...form } = createForm<typeof formSchema>(formSchema, updatedAppConfig);
@@ -66,6 +68,12 @@
 				description={m.whether_the_users_email_should_be_marked_as_verified_for_the_oidc_clients()}
 				bind:checked={$inputs.emailsVerified.value}
 			/>
+			<CheckboxWithLabel
+				id="disable-animations"
+				label={m.disable_animations()}
+				description={m.turn_off_all_animations_throughout_the_admin_ui()}
+				bind:checked={$inputs.disableAnimations.value}
+			/>
 		</div>
 		<div class="mt-5 flex justify-end">
 			<Button {isLoading} type="submit">{m.save()}</Button>