Implement notification box for web (#533)

* Added test button

* styling notification box

* Added auto dismission and animation to each notificaiont list

* Remove test button

web/src/lib/components/shared-components/notification/notification-card.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import CloseCircleOutline from 'svelte-material-icons/CloseCircleOutline.svelte';
+	import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
+
+	import {
+		ImmichNotification,
+		notificationList,
+		NotificationType
+	} from '$lib/components/shared-components/notification/notification';
+	import { onMount } from 'svelte';
+
+	export let notificationInfo: ImmichNotification;
+
+	let infoPrimaryColor = '#4250AF';
+	let errorPrimaryColor = '#E64132';
+
+	$: icon =
+		notificationInfo.type === NotificationType.Error ? CloseCircleOutline : InformationOutline;
+
+	$: backgroundColor = () => {
+		if (notificationInfo.type === NotificationType.Info) {
+			return '#E0E2F0';
+		}
+
+		if (notificationInfo.type === NotificationType.Error) {
+			return '#FBE8E6';
+		}
+	};
+
+	$: borderStyle = () => {
+		if (notificationInfo.type === NotificationType.Info) {
+			return '1px solid #D8DDFF';
+		}
+
+		if (notificationInfo.type === NotificationType.Error) {
+			return '1px solid #F0E8E7';
+		}
+	};
+
+	$: primaryColor = () => {
+		if (notificationInfo.type === NotificationType.Info) {
+			return infoPrimaryColor;
+		}
+
+		if (notificationInfo.type === NotificationType.Error) {
+			return errorPrimaryColor;
+		}
+	};
+
+	onMount(() => {
+		setTimeout(() => {
+			notificationList.removeNotificationById(notificationInfo.id);
+		}, 2500);
+	});
+</script>
+
+<div
+	transition:fade={{ duration: 250 }}
+	style:background-color={backgroundColor()}
+	style:border={borderStyle()}
+	class="min-h-[80px] w-[300px] rounded-2xl z-[999999] shadow-md p-4 mb-4"
+>
+	<div class="flex gap-2 place-items-center">
+		<svelte:component this={icon} color={primaryColor()} size="20" />
+		<h2 style:color={primaryColor()} class="font-medium">{notificationInfo.type.toString()}</h2>
+	</div>
+
+	<p class="text-sm pl-[28px] pr-[16px]">{notificationInfo.message} {notificationInfo.id}</p>
+</div>