refactor: migrate shadcn-components to Svelte 5 and TW4 (#551)

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

frontend/src/lib/components/collapsible-card.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { m } from '$lib/paraglide/messages';
 	import { cn } from '$lib/utils/style';
-	import { LucideChevronDown, type Icon as IconType } from 'lucide-svelte';
+	import { LucideChevronDown, type Icon as IconType } from '@lucide/svelte';
 	import { onMount, type Snippet } from 'svelte';
 	import { slide } from 'svelte/transition';
 	import { Button } from './ui/button';
@@ -50,12 +50,12 @@
 </script>
 
 <Card.Root>
-	<Card.Header class="cursor-pointer" onclick={toggleExpanded}>
+	<Card.Header class="bg-card cursor-pointer" onclick={toggleExpanded}>
 		<div class="flex items-center justify-between">
 			<div>
 				<Card.Title class="flex items-center gap-2 text-xl font-semibold">
 					{#if icon}{@const Icon = icon}
-						<Icon class="text-primary/80 h-5 w-5" />
+						<Icon class="text-primary/80 size-5" />
 					{/if}
 					{title}
 				</Card.Title>
@@ -65,17 +65,14 @@
 			</div>
 			<Button class="ml-10 h-8 p-3" variant="ghost" aria-label={m.expand_card()}>
 				<LucideChevronDown
-					class={cn(
-						'h-5 w-5 transition-transform duration-200',
-						expanded && 'rotate-180 transform'
-					)}
+					class={cn('size-5 transition-transform duration-200', expanded && 'rotate-180 transform')}
 				/>
 			</Button>
 		</div>
 	</Card.Header>
 	{#if expanded}
 		<div transition:slide={{ duration: 200 }}>
-			<Card.Content class="bg-muted/20 pt-5">
+			<Card.Content class="pt-5">
 				{@render children()}
 			</Card.Content>
 		</div>