added animations

src/lib/components/chat/WhatsChangedModal.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import Modal from '../common/Modal.svelte';
+	import { Confetti } from 'svelte-confetti';
 	import { WEBUI_NAME, WEB_UI_VERSION, RELEASE_NOTES } from '$lib/constants';
 	import { config, showWhatsChanged } from '$lib/stores';
 
-	export let show = false;
-
 	function toggleVisibility() {
 		showWhatsChanged.update((value) => !value);
 	}
@@ -13,7 +12,10 @@
 <Modal>
 	<div class="px-5 py-4 dark:text-gray-300">
 		<div class="flex justify-between items-start">
-			<div class="text-xl font-bold">{WEBUI_NAME}</div>
+			<div class="text-xl font-bold">
+				{WEBUI_NAME}
+				<Confetti x={[-1, -0.25]} y={[0, 0.5]} />
+			</div>
 			<button class="self-center" on:click={toggleVisibility}>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -67,6 +69,3 @@
 		</div>
 	</div>
 </Modal>
-
-<style>
-</style>

src/lib/components/common/Modal.svelte

@@ -34,14 +34,14 @@
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
-		class="fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
+		class=" fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center z-50 overflow-hidden overscroll-contain"
 		transition:fade={{ duration: 200 }}
 	>
 		<div
-			class="m-auto rounded-xl max-w-full {sizeToWidth(
+			class=" modal-content m-auto rounded-xl max-w-full {sizeToWidth(
 				size
 			)} mx-2 bg-gray-50 dark:bg-gray-900 shadow-3xl"
-			transition:fade={{ delay: 100, duration: 200 }}
+			transition:fade={{ duration: 200 }}
 			on:click={(e) => {
 				e.stopPropagation();
 			}}
@@ -50,3 +50,20 @@
 		</div>
 	</div>
 {/if}
+
+<style>
+	.modal-content {
+		animation: scaleUp 0.1s ease-out forwards;
+	}
+
+	@keyframes scaleUp {
+		from {
+			transform: scale(0.9);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+</style>