Confetti

src/routes/+page.svelte

@@ -8,6 +8,7 @@
 	import { Carta, MarkdownEditor } from 'carta-md';
 	import 'carta-md/default.css'; /* Default theme */
 	import DOMPurify from 'dompurify';
+	import { Confetti } from "svelte-confetti"
 
 	// Create a new instance of Carta (you might also want to add a sanitizer if you're processing user input)
 	let carta = new Carta({
@@ -91,7 +92,6 @@
 	{/if}
 	<div class="mx-auto p-4">
 		<h1 class="mb-4 text-2xl font-bold">Eine Ideensammlung starten</h1>
-
 		{#if $connected}
 		{#key $questionId}
 			{#if $questionId === ''}
@@ -103,6 +103,7 @@
 				<div class="qr-share mt-4">
 					<h2 class="text-xl font-bold">Diese Sammlung teilen</h2>
 					<h3 class="text-center short-id">{questionShortId}</h3>
+					<div class="flex justify-center"><Confetti amount="600" size="15" cone x={[-4.5, 4.5]} y={[-1.5, 1.5]} delay={[0, 1000]} /></div>
 					<img src={$qrCodeUrl} alt="QR Code" class="mt-2" />
 					<p class="mb-1 text-center">Diesen QR-Code oder Link teilen:</p>
 					<p class="text-center mb-2 text-xl">

src/routes/q/[id]/+page.svelte

@@ -1,4 +1,6 @@
 <script>
+	import { Confetti } from 'svelte-confetti';
+
 	/** @type {import('./$types').PageProps} */
 	let { data } = $props();
 
@@ -18,6 +20,7 @@
 		if (!$comment) {
 			return;
 		}
+		submit.set(true);
 		const commentEvent = new NDKEvent($ndk, {
 			kind: 2222,
 			content: $comment,
@@ -25,6 +28,7 @@
 		});
 		commentEvent.publish();
 		comment.set('');
+		setTimeout(() => submit.set(false), 3000);
 	}
 
 	/**
@@ -49,6 +53,7 @@
 	}
 
 	let comment = writable('');
+	let submit = writable(false);
 	let comments = writable([]);
 	let question = writable();
 	const [kind, pubkey, d] = data.id.split(':');
@@ -103,6 +108,9 @@
 			<h1 class="pt-15 text-xl font-bold">Meine Idee hinzufügen</h1>
 			<MarkdownEditor bind:value={$comment} {carta} />
 			<button class="btn btn-primary mt-5 mb-10" onclick={() => submitComment()}>Hinzufügen</button>
+			{#if $submit === true}
+				<div class="flex justify-center"><Confetti amount="50"} /></div>
+			{/if}
 		</div>
 	{:else}
 		<p>Loading...</p>
@@ -110,8 +118,8 @@
 
 	<div class="mx-auto flex w-full flex-col items-center justify-center gap-5">
 		{#key $showReactions}
-			{#each $comments.sort((a, b) => a.created_at - b.created_at).reverse() as event}
-				<Comment {event} showReactions={$showReactions} />
+		{#each $comments.sort((a, b) => b.created_at - a.created_at) as event}
+			<Comment event={event} showReactions={$showReactions}  />
 			{/each}
 		{/key}
 	</div>