fix: explicitly cache images to prevent unexpected behavior

frontend/src/lib/components/form/profile-picture-settings.svelte

@@ -3,7 +3,7 @@
 	import * as Avatar from '$lib/components/ui/avatar';
 	import Button from '$lib/components/ui/button/button.svelte';
 	import { m } from '$lib/paraglide/messages';
-	import { getProfilePictureUrl } from '$lib/utils/profile-picture-util';
+	import { cachedProfilePicture } from '$lib/utils/cached-image-util';
 	import { LucideLoader, LucideRefreshCw, LucideUpload } from '@lucide/svelte';
 	import { onMount } from 'svelte';
 	import { openConfirmDialog } from '../confirm-dialog';
@@ -25,7 +25,7 @@
 	onMount(() => {
 		// The "skipCache" query will only be added to the profile picture url on client-side
 		// because of that we need to set the imageDataURL after the component is mounted
-		imageDataURL = getProfilePictureUrl(userId);
+		imageDataURL = cachedProfilePicture.getUrl(userId);
 	});
 
 	async function onImageChange(e: Event) {
@@ -41,7 +41,7 @@
 		reader.readAsDataURL(file);
 
 		await updateCallback(file).catch(() => {
-			imageDataURL = getProfilePictureUrl(userId);
+			imageDataURL = cachedProfilePicture.getUrl(userId);
 		});
 		isLoading = false;
 	}

frontend/src/lib/components/header/header-avatar.svelte

@@ -5,7 +5,7 @@
 	import { m } from '$lib/paraglide/messages';
 	import WebAuthnService from '$lib/services/webauthn-service';
 	import userStore from '$lib/stores/user-store';
-	import { getProfilePictureUrl } from '$lib/utils/profile-picture-util';
+	import { cachedProfilePicture } from '$lib/utils/cached-image-util';
 	import { LucideLogOut, LucideUser } from '@lucide/svelte';
 
 	const webauthnService = new WebAuthnService();
@@ -19,7 +19,7 @@
 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
 		><Avatar.Root class="size-9">
-			<Avatar.Image src={getProfilePictureUrl($userStore?.id)} />
+			<Avatar.Image src={cachedProfilePicture.getUrl($userStore!.id)} />
 		</Avatar.Root></DropdownMenu.Trigger
 	>
 	<DropdownMenu.Content class="min-w-40" align="end">

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { m } from '$lib/paraglide/messages';
+	import { cachedBackgroundImage } from '$lib/utils/cached-image-util';
 	import { cn } from '$lib/utils/style';
 	import type { Snippet } from 'svelte';
 	import { MediaQuery } from 'svelte/reactivity';
@@ -54,7 +55,7 @@
 		<!-- Background image with slide animation -->
 		<div class="{cn(animate && 'animate-slide-bg-container')} absolute top-0 right-0 bottom-0 z-0">
 			<img
-				src="/api/application-configuration/background-image"
+				src={cachedBackgroundImage.getUrl()}
 				class="h-screen rounded-l-[60px] object-cover {animate
 					? 'w-full'
 					: 'w-[calc(100vw-650px)]'}"
@@ -64,7 +65,7 @@
 	</div>
 {:else}
 	<div
-		class="flex h-screen items-center justify-center bg-[url('/api/application-configuration/background-image')] bg-cover bg-center text-center"
+		class="flex h-screen items-center justify-center bg-[url('{cachedBackgroundImage.getUrl()}')] bg-cover bg-center text-center"
 	>
 		<Card.Root class="mx-3 w-full max-w-md" style={animate ? 'animation-delay: 200ms;' : ''}>
 			<Card.CardContent

frontend/src/lib/components/logo.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { m } from '$lib/paraglide/messages';
+	import { cachedApplicationLogo } from '$lib/utils/cached-image-util';
 	import { mode } from 'mode-watcher';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let { ...props }: HTMLAttributes<HTMLImageElement> = $props();
 
-	const isDarkMode = $derived(mode.current === 'dark');
+	const isLightMode = $derived(mode.current === 'light');
 </script>
 
-<img {...props} src="/api/application-configuration/logo?light={!isDarkMode}" alt={m.logo()} />
+<img {...props} src={cachedApplicationLogo.getUrl(isLightMode)} alt={m.logo()} />