feat: modernize ui (#381)

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

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

@@ -1,23 +1,25 @@
 <script lang="ts">
+	import { m } from '$lib/paraglide/messages';
 	import { cn } from '$lib/utils/style';
-	import { LucideChevronDown } 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';
 	import * as Card from './ui/card';
-	import { m } from '$lib/paraglide/messages';
 
 	let {
 		id,
 		title,
 		description,
 		defaultExpanded = false,
+		icon,
 		children
 	}: {
 		id: string;
 		title: string;
 		description?: string;
 		defaultExpanded?: boolean;
+		icon?: typeof IconType;
 		children: Snippet;
 	} = $props();
 
@@ -51,7 +53,12 @@
 	<Card.Header class="cursor-pointer" onclick={toggleExpanded}>
 		<div class="flex items-center justify-between">
 			<div>
-				<Card.Title>{title}</Card.Title>
+				<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" />
+					{/if}
+					{title}
+				</Card.Title>
 				{#if description}
 					<Card.Description>{description}</Card.Description>
 				{/if}
@@ -68,7 +75,7 @@
 	</Card.Header>
 	{#if expanded}
 		<div transition:slide={{ duration: 200 }}>
-			<Card.Content>
+			<Card.Content class="bg-muted/20 pt-5">
 				{@render children()}
 			</Card.Content>
 		</div>