From 1b71b6a1197967271528fd0d5b9ff5fc9a1f3c26 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 11 Jan 2024 18:45:31 -0800
Subject: feat: notifications

---
 src/lib/Notification/Notification.svelte | 112 +++++++++++++++++++++++++++++++
 src/lib/Notification/options.ts          |  19 ++++++
 src/lib/Settings/Categories/Debug.svelte |  26 ++++++-
 src/routes/+layout.svelte                |  28 ++++----
 4 files changed, 171 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/Notification/Notification.svelte
 create mode 100644 src/lib/Notification/options.ts

(limited to 'src')

diff --git a/src/lib/Notification/Notification.svelte b/src/lib/Notification/Notification.svelte
new file mode 100644
index 00000000..9612d526
--- /dev/null
+++ b/src/lib/Notification/Notification.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	export let notification: { [key: string]: any } = {};
+	export let onRemove: () => void = () => {
+		return;
+	};
+	export let removed = false;
+
+	onMount(() => setTimeout(remove, notification.duration));
+
+	const remove = () => {
+		removed = true;
+
+		setTimeout(onRemove, 150);
+	};
+</script>
+
+<div id="notification-container" class={removed ? 'fade-out' : 'fade-in'}>
+	{#if notification.description}
+		<details open id="notification">
+			<summary>{@html notification.heading}</summary>
+
+			{@html notification.description}
+
+			<br />
+
+			<div class="button-container">
+				<button on:click={remove} class="button-hide">Hide</button>
+			</div>
+		</details>
+	{:else}
+		<div class="card" id="notification">
+			{@html notification.heading}
+
+			&nbsp; &nbsp;
+
+			<div class="button-container">
+				<button on:click={remove} class="button-hide">Hide</button>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	#notification-container {
+		margin: 1rem 1rem 0 0;
+		float: right;
+	}
+
+	#notification {
+		background-color: var(--base001);
+		box-shadow: rgba(0, 0, 11, 0.2) 0px 7px 29px 0px, 0 0 0 4px var(--base0E);
+
+		widows: 100%;
+	}
+
+	.button-container {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	#notification > div {
+		display: inline;
+	}
+
+	.button-hide {
+		float: right;
+	}
+
+	.button-container::after {
+		content: '';
+		clear: both;
+		display: table;
+	}
+
+	.fade-in {
+		animation: fadeInAnimation ease 300ms;
+		animation-iteration-count: 1;
+		animation-fill-mode: forwards;
+	}
+
+	.fade-out {
+		animation: fadeOutAnimation ease 150ms;
+		animation-iteration-count: 1;
+		animation-fill-mode: forwards;
+	}
+
+	@keyframes fadeInAnimation {
+		100% {
+			opacity: 1;
+		}
+		1% {
+			opacity: 0.01;
+		}
+		0% {
+			opacity: 0;
+		}
+	}
+
+	@keyframes fadeOutAnimation {
+		0% {
+			opacity: 1;
+		}
+		99% {
+			opacity: 0.01;
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+</style>
diff --git a/src/lib/Notification/options.ts b/src/lib/Notification/options.ts
new file mode 100644
index 00000000..f14e0d25
--- /dev/null
+++ b/src/lib/Notification/options.ts
@@ -0,0 +1,19 @@
+type Position = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+interface Options {
+	heading: string | number;
+	description: string | number | undefined;
+	position: Position;
+	duration: number;
+	id: string;
+}
+
+export const options = (preferences: { [key: string]: number | string }): Options => {
+	return {
+		position: (preferences.position || 'top-right') as Position,
+		duration: Number(preferences.duration || 3000),
+		heading: preferences.heading || 'Notification',
+		description: preferences.description || undefined,
+		id: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+	};
+};
diff --git a/src/lib/Settings/Categories/Debug.svelte b/src/lib/Settings/Categories/Debug.svelte
index 5f6be96b..c21b6dd7 100644
--- a/src/lib/Settings/Categories/Debug.svelte
+++ b/src/lib/Settings/Categories/Debug.svelte
@@ -1,16 +1,38 @@
 <script lang="ts">
 	import settings from '$stores/settings';
+	import { getNotificationsContext } from 'svelte-notifications';
 	import SettingHint from '../SettingHint.svelte';
+	import { options } from '$lib/Notification/options';
+
+	const { addNotification } = getNotificationsContext();
 </script>
 
-<button on:click={settings.reset}>Reset <b>ALL</b> settings</button>
+<button
+	on:click={() => {
+		settings.reset();
+		addNotification(
+			options({
+				heading: 'All settings successfully reset'
+			})
+		);
+	}}>Reset <b>ALL</b> settings</button
+>
 <SettingHint lineBreak>
 	Resets all settings present on this page to their default values
 </SettingHint>
 
 <p />
 
-<button on:click={() => localStorage.clear()}>Clear <code>localStorage</code></button>
+<button
+	on:click={() => {
+		localStorage.clear();
+		addNotification(
+			options({
+				heading: '<code>localStorage</code> successfully cleared'
+			})
+		);
+	}}>Clear <code>localStorage</code></button
+>
 <SettingHint lineBreak>
 	Resets all of your settings to their default values and clears both AniList media list and manga
 	data caches
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e1df9c9d..52d1b8ba 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,6 +10,8 @@
 	import { fly } from 'svelte/transition';
 	import { readable, type Readable } from 'svelte/store';
 	import { navigating } from '$app/stores';
+	import Notifications from 'svelte-notifications';
+	import Notification from '$lib/Notification/Notification.svelte';
 
 	export let data;
 
@@ -99,18 +101,20 @@
 
 	<p />
 
-	{#key data.url}
-		<div
-			in:fly={{
-				x: way,
-				duration: animationDelay,
-				delay: animationDelay
-			}}
-			out:fly={{ x: -way, duration: animationDelay }}
-		>
-			<slot />
-		</div>
-	{/key}
+	<Notifications item={Notification} zIndex={5000}>
+		{#key data.url}
+			<div
+				in:fly={{
+					x: way,
+					duration: animationDelay,
+					delay: animationDelay
+				}}
+				out:fly={{ x: -way, duration: animationDelay }}
+			>
+				<slot />
+			</div>
+		{/key}
+	</Notifications>
 </div>
 
 <style>
-- 
cgit v1.2.3