fix(notifications): Replace svelte-notifications with custom store for Svelte 5

9 files changed, 70 insertions, 21 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}