feat: disable animations setting toggle (#442)

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

backend/internal/dto/app_config_dto.go

@@ -15,6 +15,7 @@ type AppConfigUpdateDto struct {
 	AppName                            string `json:"appName" binding:"required,min=1,max=30"`
 	SessionDuration                    string `json:"sessionDuration" binding:"required"`
 	EmailsVerified                     string `json:"emailsVerified" binding:"required"`
+	DisableAnimations                  string `json:"disableAnimations" binding:"required"`
 	AllowOwnAccountEdit                string `json:"allowOwnAccountEdit" binding:"required"`
 	SmtpHost                           string `json:"smtpHost"`
 	SmtpPort                           string `json:"smtpPort"`

backend/internal/model/app_config.go

@@ -34,6 +34,7 @@ type AppConfig struct {
 	AppName             AppConfigVariable `key:"appName,public"` // Public
 	SessionDuration     AppConfigVariable `key:"sessionDuration"`
 	EmailsVerified      AppConfigVariable `key:"emailsVerified"`
+	DisableAnimations   AppConfigVariable `key:"disableAnimations,public"`   // Public
 	AllowOwnAccountEdit AppConfigVariable `key:"allowOwnAccountEdit,public"` // Public
 	// Internal
 	BackgroundImageType AppConfigVariable `key:"backgroundImageType,internal"` // Internal

backend/internal/service/app_config_service.go

@@ -58,6 +58,7 @@ func (s *AppConfigService) getDefaultDbConfig() *model.AppConfig {
 		AppName:             model.AppConfigVariable{Value: "Pocket ID"},
 		SessionDuration:     model.AppConfigVariable{Value: "60"},
 		EmailsVerified:      model.AppConfigVariable{Value: "false"},
+		DisableAnimations:   model.AppConfigVariable{Value: "false"},
 		AllowOwnAccountEdit: model.AppConfigVariable{Value: "true"},
 		// Internal
 		BackgroundImageType: model.AppConfigVariable{Value: "jpg"},

frontend/messages/en-US.json

@@ -322,5 +322,7 @@
 	"see_all_account_activities_from_the_last_3_months": "See all user activity for the last 3 months.",
 	"token_sign_in": "Token Sign In",
 	"client_authorization": "Client Authorization",
-	"new_client_authorization": "New Client Authorization"
+	"new_client_authorization": "New Client Authorization",
+	"disable_animations": "Disable Animations",
+	"turn_off_all_animations_throughout_the_admin_ui": "Turn off all animations throughout the Admin UI"
 }

frontend/src/lib/components/fade-wrapper.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { Snippet } from 'svelte';
 
 	let {
@@ -12,7 +13,7 @@
 		children: Snippet;
 	} = $props();
 
-	let containerNode: HTMLElement;
+	let containerNode: HTMLElement | null = $state(null);
 
 	$effect(() => {
 		page.route;
@@ -53,6 +54,10 @@
 	</style>
 </svelte:head>
 
-<div class="fade-wrapper" bind:this={containerNode}>
+{#if $appConfigStore.disableAnimations}
 	{@render children()}
-</div>
+{:else}
+	<div class="fade-wrapper" bind:this={containerNode}>
+		{@render children()}
+	</div>
+{/if}

frontend/src/lib/types/application-configuration.ts

@@ -3,6 +3,7 @@ export type AppConfig = {
 	allowOwnAccountEdit: boolean;
 	emailOneTimeAccessEnabled: boolean;
 	ldapEnabled: boolean;
+	disableAnimations: boolean;
 };
 
 export type AllAppConfig = AppConfig & {

frontend/src/routes/login/+page.svelte

@@ -36,7 +36,7 @@
 	<title>{m.sign_in()}</title>
 </svelte:head>
 
-<SignInWrapper animate showAlternativeSignInMethodButton>
+<SignInWrapper animate={!$appConfigStore.disableAnimations} showAlternativeSignInMethodButton>
 	<div class="flex justify-center">
 		<LoginLogoErrorSuccessIndicator error={!!error} />
 	</div>

frontend/src/routes/login/alternative/+page.svelte

@@ -31,7 +31,7 @@
 	<title>{m.sign_in()}</title>
 </svelte:head>
 
-<SignInWrapper>
+<SignInWrapper animate={!$appConfigStore.disableAnimations}>
 	<div class="flex h-full flex-col justify-center">
 		<div class="bg-muted mx-auto rounded-2xl p-3">
 			<Logo class="h-10 w-10" />

frontend/src/routes/login/setup/+page.svelte

@@ -29,7 +29,7 @@
 	}
 </script>
 
-<SignInWrapper>
+<SignInWrapper animate={!$appConfigStore.disableAnimations}>
 	<div class="flex justify-center">
 		<LoginLogoErrorSuccessIndicator error={!!error} />
 	</div>

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>