allow two children to get single anime and launch modal

frontend/src/App.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import {GetAniListSingleItemAndOpenModal, anime, title, anilistModal} from "./GetAniListSingleItemAndOpenModal.svelte";
     import {
         AniListSearch,
         GetAniListUserWatchingList
@@ -6,9 +7,8 @@
     import {type AniSearchList, MediaListSort} from "./anilist/types/AniListTypes";
     import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
     import Header from "./Header.svelte";
-    import {Button, Modal} from "flowbite-svelte";
-    import type {AniListGetSingleAnime} from "./anilist/types/AniListCurrentUserWatchListType.js";
-    import {GetAniListItem} from "../wailsjs/go/main/App";
+    import {Modal} from "flowbite-svelte";
+
     import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
 
     let aniSearch = ""
@@ -18,9 +18,8 @@
     let aniListWatchlist: AniListCurrentUserWatchList
     let page = 1
     let perPage = 20
-    let anilistModal = false;
-    let anime: AniListGetSingleAnime
-    let title: string
+    const size = "xl"
+
 
     function runAniListSearch(): void {
         AniListSearch(aniSearch).then(result => {
@@ -36,15 +35,7 @@
         })
     }
 
-    export function GetAniListSingleItemAndOpenModal(aniId: number): void {
-        GetAniListItem(aniId).then(result => {
-            anime = result
-            title = anime.data.MediaList.media.title.english === "" ?
-                anime.data.MediaList.media.title.romaji :
-                anime.data.MediaList.media.title.english
-            anilistModal = true
-        })
-    }
+
 </script>
 
 <Header />
@@ -110,7 +101,7 @@
             </div>
         </div>
     {/if}
-    <Modal title={title} bind:open={anilistModal} autoclose>
-        <ChangeDataDialogue anime={anime} />
+    <Modal title={$title} bind:open={$anilistModal} {size} autoclose>
+        <ChangeDataDialogue />
     </Modal>
 </main>