wip: not loading themes until reload, missing in dashboard, bad alignment and scaling

src/lib/components/themes/svgs/CardPattern.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	let {
+		color = 'currentColor',
+		opacity = 0.08,
+		pattern = 'waves'
+	}: {
+		color?: string;
+		opacity?: number;
+		pattern?: 'waves' | 'geometric' | 'dots';
+	} = $props();
+</script>
+
+<div class="absolute bottom-0 left-0 right-0 pointer-events-none overflow-hidden rounded-b-lg" style="opacity: {opacity};">
+	{#if pattern === 'waves'}
+		<svg class="w-full h-auto" viewBox="0 0 400 80" xmlns="http://www.w3.org/2000/svg">
+			<path
+				fill={color}
+				d="M0,40 C100,20 200,60 300,40 C350,30 375,35 400,40 L400,80 L0,80 Z"
+			/>
+		</svg>
+	{:else if pattern === 'geometric'}
+		<svg class="w-full h-auto" viewBox="0 0 400 80" xmlns="http://www.w3.org/2000/svg">
+			<path
+				fill={color}
+				d="M0,80 L200,20 L400,80 Z"
+			/>
+		</svg>
+	{:else if pattern === 'dots'}
+		<svg class="w-full h-auto" viewBox="0 0 400 80" xmlns="http://www.w3.org/2000/svg">
+			<defs>
+				<pattern id="dots-pattern-card" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+					<circle cx="10" cy="10" r="2" fill={color} />
+				</pattern>
+			</defs>
+			<rect width="400" height="80" fill="url(#dots-pattern-card)" />
+		</svg>
+	{/if}
+</div>