10 files changed, 73 insertions, 25 deletions
diff --git a/src/lib/List/Anime/CompletedAnimeList.svelte b/src/lib/List/Anime/CompletedAnimeList.svelte
index 4245525d..8e914ef6 100644
--- a/src/lib/List/Anime/CompletedAnimeList.svelte
+++ b/src/lib/List/Anime/CompletedAnimeList.svelte
@@ -6,7 +6,7 @@
   import lastPruneTimes from '$stores/lastPruneTimes';
   import settings from '$stores/settings';
   import AnimeList from './AnimeListTemplate.svelte';
-  import { getNotificationsContext } from 'svelte-notifications';
+  import { addNotification } from '$lib/Notification/store';
   import locale from '$stores/locale';
   import identity from '$stores/identity';
   import sampleAnime from '$lib/Data/Static/SampleMedia/anime.json';
@@ -19,8 +19,6 @@
   };
   export let dummy = false;
   export let disableFilter = false;
-
-  const { addNotification } = getNotificationsContext();
   let animeLists: Promise<Media[]>;
   let startTime: number;
   let endTime: number;
diff --git a/src/lib/List/Anime/DueAnimeList.svelte b/src/lib/List/Anime/DueAnimeList.svelte
index 95be3b6c..2db8da65 100644
--- a/src/lib/List/Anime/DueAnimeList.svelte
+++ b/src/lib/List/Anime/DueAnimeList.svelte
@@ -8,13 +8,11 @@
   import AnimeList from './AnimeListTemplate.svelte';
   import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
   import { injectAiringTime } from '$lib/Media/Anime/Airing/Subtitled/match';
-  import { getNotificationsContext } from 'svelte-notifications';
+  import { addNotification } from '$lib/Notification/store';
   import locale from '$stores/locale';
   import identity from '$stores/identity';
 
   export let user: AniListAuthorisation;
-
-  const { addNotification } = getNotificationsContext();
   let animeLists: Promise<Media[]>;
   let startTime: number;
   let endTime: number;
diff --git a/src/lib/List/Anime/UpcomingAnimeList.svelte b/src/lib/List/Anime/UpcomingAnimeList.svelte
index 7b01af86..a0645320 100644
--- a/src/lib/List/Anime/UpcomingAnimeList.svelte
+++ b/src/lib/List/Anime/UpcomingAnimeList.svelte
@@ -7,15 +7,13 @@
   import AnimeList from './AnimeListTemplate.svelte';
   import settings from '$stores/settings';
   import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
-  import { getNotificationsContext } from 'svelte-notifications';
+  import { addNotification } from '$lib/Notification/store';
   import locale from '$stores/locale';
   import identity from '$stores/identity';
   import { injectAiringTime } from '$lib/Media/Anime/Airing/Subtitled/match';
   import revalidateAnime from '$stores/revalidateAnime';
 
   export let user: AniListAuthorisation;
-
-  const { addNotification } = getNotificationsContext();
   let animeLists: Promise<Media[]>;
   let startTime: number;
   let endTime: number;
diff --git a/src/lib/List/Manga/MangaListTemplate.svelte b/src/lib/List/Manga/MangaListTemplate.svelte
index b2d95dc5..83c491c8 100644
--- a/src/lib/List/Manga/MangaListTemplate.svelte
+++ b/src/lib/List/Manga/MangaListTemplate.svelte
@@ -13,7 +13,7 @@
   import Error from '$lib/Error/RateLimited.svelte';
   import CleanMangaList from './CleanMangaList.svelte';
   import { incrementMediaProgress } from '$lib/Media/Anime/cache';
-  import { getNotificationsContext } from 'svelte-notifications';
+  import { addNotification } from '$lib/Notification/store';
   import { options } from '$lib/Notification/options';
   import Skeleton from '$lib/Loading/Skeleton.svelte';
   import locale from '$stores/locale';
@@ -32,8 +32,6 @@
   export let due: boolean;
   export let dummy = $settings.debugDummyLists || false;
   export let disableFilter = false;
-
-  const { addNotification } = getNotificationsContext();
   const authorised = privilegedUser($identity.id);
   let mangaLists: Promise<Media[]>;
   let startTime: number;
diff --git a/src/lib/Notification/NotificationsProvider.svelte b/src/lib/Notification/NotificationsProvider.svelte
new file mode 100644
index 00000000..964317e9
--- /dev/null
+++ b/src/lib/Notification/NotificationsProvider.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { notifications } from './store';
+  import EventNotification from './Notification.svelte';
+
+  export let zIndex = 5000;
+
+  const handleRemove = (id: string) => {
+    notifications.remove(id);
+  };
+</script>
+
+<div class="notifications-container" style="z-index: {zIndex};">
+  {#each $notifications as notification (notification.id)}
+    <EventNotification {notification} onRemove={() => handleRemove(notification.id)} />
+  {/each}
+</div>
+
+<slot />
+
+<style>
+  .notifications-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    pointer-events: none;
+  }
+
+  .notifications-container :global(#notification-container) {
+    pointer-events: auto;
+  }
+</style>
diff --git a/src/lib/Notification/store.ts b/src/lib/Notification/store.ts
new file mode 100644
index 00000000..0cb4cf96
--- /dev/null
+++ b/src/lib/Notification/store.ts
@@ -0,0 +1,32 @@
+import { writable } from 'svelte/store';
+
+export interface Notification {
+  id: string;
+  heading: string;
+  description?: string;
+  duration?: number;
+}
+
+function createNotificationStore() {
+  const { subscribe, update } = writable<Notification[]>([]);
+
+  return {
+    subscribe,
+    add: (notification: Omit<Notification, 'id'>) => {
+      const id = crypto.randomUUID();
+
+      update((notifications) => [...notifications, { ...notification, id }]);
+
+      return id;
+    },
+    remove: (id: string) => {
+      update((notifications) => notifications.filter((n) => n.id !== id));
+    }
+  };
+}
+
+export const notifications = createNotificationStore();
+
+export function addNotification(notification: Omit<Notification, 'id'>) {
+  return notifications.add(notification);
+}
diff --git a/src/lib/Settings/Categories/Debug.svelte b/src/lib/Settings/Categories/Debug.svelte
index 379b27d0..852db4f3 100644
--- a/src/lib/Settings/Categories/Debug.svelte
+++ b/src/lib/Settings/Categories/Debug.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import settings from '$stores/settings';
-  import { getNotificationsContext } from 'svelte-notifications';
+  import { addNotification } from '$lib/Notification/store';
   import SettingHint from '../SettingHint.svelte';
   import { options } from '$lib/Notification/options';
   import locale from '$stores/locale';
@@ -8,8 +8,6 @@
   import localforage from 'localforage';
   import { browser } from '$app/environment';
 
-  const { addNotification } = getNotificationsContext();
-
   const clearCaches = async () => {
     if (!browser) return;
 
diff --git a/src/lib/Settings/Categories/RSSFeeds.svelte b/src/lib/Settings/Categories/RSSFeeds.svelte
index a225b137..00b0bba4 100644
--- a/src/lib/Settings/Categories/RSSFeeds.svelte
+++ b/src/lib/Settings/Categories/RSSFeeds.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
   import { options } from '$lib/Notification/options';
-  import { getNotificationsContext } from 'svelte-notifications';
+  import { addNotification } from '$lib/Notification/store';
   import { env } from '$env/dynamic/public';
   import locale from '$stores/locale';
   import SettingHint from '../SettingHint.svelte';
   import tooltip from '$lib/Tooltip/tooltip';
 
   export let user: any;
-
-  const { addNotification } = getNotificationsContext();
 </script>
 
 <button
diff --git a/src/lib/Settings/Categories/SettingSync.svelte b/src/lib/Settings/Categories/SettingSync.svelte
index 39e62954..937ec31d 100644
--- a/src/lib/Settings/Categories/SettingSync.svelte
+++ b/src/lib/Settings/Categories/SettingSync.svelte
@@ -3,12 +3,10 @@
   import root from '$lib/Utility/root';
   import identity from '$stores/identity';
   import settings from '$stores/settings';
-  import { getNotificationsContext } from 'svelte-notifications';
+  import { addNotification } from '$lib/Notification/store';
   import SettingHint from '../SettingHint.svelte';
   import locale from '$stores/locale';
   import settingsSyncTimes from '$stores/settingsSyncTimes';
-
-  const { addNotification } = getNotificationsContext();
 </script>
 
 {#if !$settings.settingsSync}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d9caca74..4c6cf786 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,8 +10,7 @@
   import '../app.css';
   import { readable, type Readable } from 'svelte/store';
   import { navigating } from '$app/stores';
-  import Notifications from 'svelte-notifications';
-  import * as EventNotification from '$lib/Notification/Notification.svelte';
+  import NotificationsProvider from '$lib/Notification/NotificationsProvider.svelte';
   import Root from '$lib/Home/Root.svelte';
   import root from '$lib/Utility/root';
   import { addMessages, init, locale as i18nLocale, locales } from 'svelte-i18n';
@@ -254,7 +253,7 @@
 
     <p />
 
-    <Notifications item={EventNotification} zIndex={5000}>
+    <NotificationsProvider zIndex={5000}>
       <Root {data} {way}>
         {#if $userIdentity.id !== -1}
           <slot />
@@ -267,7 +266,7 @@
           <Skeleton grid={true} count={1} height="80vh" />
         {/if}
       </Root>
-    </Notifications>
+    </NotificationsProvider>
   </div>
 {/if}