changed from modal to client-side router

frontend/src/helperComponents/WatchList.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import {
+        aniListLoggedIn,
+        aniListWatchlist,
+        GetAniListSingleItem,
+        loading,
+    } from "./GlobalVariablesAndHelperFunctions.svelte";
+    import {push} from "svelte-spa-router";
+    import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType"
+    import {Rating} from "flowbite-svelte";
+    import loader from '../helperFunctions/loader'
+
+
+    let isAniListLoggedIn: boolean
+    let aniListWatchListLoaded: AniListCurrentUserWatchList
+
+    aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
+    aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
+
+</script>
+
+<div>
+    {#if isAniListLoggedIn}
+        <div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8 relative items-center">
+            <h1 class="text-left text-xl font-bold mb-4">Your AniList WatchList</h1>
+
+            <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+                {#each aniListWatchListLoaded.data.Page.mediaList as media}
+                    <div use:loader={loading} class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
+                        <div class="flex flex-col items-center group">
+                            <button on:click={() => {
+                                push(`#/anime/${media.media.id}`)
+                                // loading.set(true)
+                                // GetAniListSingleItem(media.media.id, true).then(() => {
+                                //     loading.set(false)
+                                //
+                                // })
+                            }}
+                            >
+                                <img class="rounded-lg" src={media.media.coverImage.large} alt={
+                                media.media.title.english === "" ?
+                                    media.media.title.romaji :
+                                    media.media.title.english
+                            }/>
+                            </button>
+                            <Rating id="anime-rating" total={5} size={35} rating={media.score/2.0}/>
+                            <button class="mt-4 text-md font-semibold text-white-700"
+                                    on:click={() => GetAniListSingleItem(media.media.id, true)}>
+                                {
+                                    media.media.title.english === "" ?
+                                        media.media.title.romaji :
+                                        media.media.title.english
+                                }
+                            </button>
+                            <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
+                                / {media.media.nextAiringEpisode.episode !== 0 ?
+                                    media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
+                            {#if media.media.episodes > 0}
+                                <p class="mt-1 text-lg font-medium text-white-900">Total
+                                    Episodes: {media.media.episodes}</p>
+                            {/if}
+                        </div>
+                    </div>
+                {/each}
+            </div>
+        </div>
+    {/if}
+</div>