made a bunch of frontend variables global

frontend/src/App.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
     import {
         anilistModal,
-        GetAniListSingleItemAndOpenModal,
         title,
         simklWatchList,
         aniListLoggedIn,
-        simklLoggedIn
+        simklLoggedIn,
+        simklUser,
+        aniListUser,
+        aniListPrimary,
+        aniListWatchlist,
+        loginToAniList,
+        GetAniListSingleItemAndOpenModal,
+        loginToSimkl
     } from "./GlobalVariablesAndHelperFunctions.svelte";
     import {
         CheckIfAniListLoggedIn,
@@ -24,15 +30,22 @@
     import {onMount} from "svelte";
     import type {SimklUser} from "./simkl/types/simklTypes";
 
-    let aniListPrimary = true
+
-    let simklUser: SimklUser
+
-    let aniListUser: AniListUser
-    let aniListWatchlist: AniListCurrentUserWatchList
     let isAniListLoggedIn: boolean
     let isSimklLoggedIn: boolean
+    let currentSimklUser: SimklUser
+    let currentAniListUser: AniListUser
+    let isAniListPrimary: boolean
+    let aniListWatchListLoaded: AniListCurrentUserWatchList
 
     aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
     simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
+    simklUser.subscribe((value) => currentSimklUser = value)
+    aniListUser.subscribe((value) => currentAniListUser = value)
+    aniListPrimary.subscribe((value) => isAniListPrimary = value)
+    aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
+
 
     let page = 1
     let perPage = 20
@@ -42,10 +55,10 @@
         await CheckIfAniListLoggedIn().then(result => {
             if (result) {
                 GetAniListLoggedInUser().then(result => {
-                    aniListUser = result
+                    aniListUser.set(result)
-                    if (aniListPrimary) {
+                    if (isAniListPrimary) {
                         GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
-                            aniListWatchlist = result
+                            aniListWatchlist.set(result)
                             aniListLoggedIn.set(true)
                         })
                     } else {
@@ -58,7 +71,7 @@
         await CheckIfSimklLoggedIn().then(result => {
             if (result) {
                 GetSimklLoggedInUser().then(result => {
-                    simklUser = result
+                    simklUser.set(result)
                     SimklGetUserWatchlist().then(result => {
                         simklWatchList.set(result)
                         simklLoggedIn.set(result)
@@ -67,57 +80,19 @@
             }
         })
     })
-
-    function loginToSimkl(): void {
-        GetSimklLoggedInUser().then(result => {
-            simklUser = result
-            simklLoggedIn.set(true)
-        })
-    }
-
-    function loginToAniList(): void {
-        GetAniListLoggedInUser().then(result => {
-            aniListUser = result
-            aniListLoggedIn.set(true)
-            if (aniListPrimary) {
-                GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then(result => aniListWatchlist = result)
-            }
-        })
-    }
-
-    // function anilistGetUserWatchlist(): void {
-    //     GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
-    //         aniListWatchlist = result
-    //         aniListLoggedIn.set(true)
-    //     })
-    // }
-    //
-    // let count = 1;
-    //
-    // const decrement = () => {
-    //     if (count > 0) {
-    //         count--
-    //     }
-    // }
-    //
-    // const increment = () => {
-    //     count++
-    // }
-
-
 </script>
 
 <Header/>
 
 <main>
     {#if isAniListLoggedIn}
-        <div>You are logged into AniList, {aniListUser.data.Viewer.name}!</div>
+        <div>You are logged into AniList, {currentAniListUser.data.Viewer.name}!</div>
     {:else}
         <button class="btn" on:click={loginToAniList}>Login to AniList</button>
     {/if}
 
     {#if isSimklLoggedIn}
-        <div>You are logged into Simkl, {simklUser.user.name}</div>
+        <div>You are logged into Simkl, {currentSimklUser.user.name}</div>
     {:else}
         <Button class="btn" on:click={loginToSimkl}>Login to Simkl</Button>
     {/if}
@@ -127,7 +102,7 @@
             <h1 class="text-left text-xl font-bold mb-4">Your Watching List</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 aniListWatchlist.data.Page.mediaList as media}
+                {#each aniListWatchListLoaded.data.Page.mediaList as media}
                     <div 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={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>

frontend/src/GlobalVariablesAndHelperFunctions.svelte

@@ -1,8 +1,16 @@
 <script lang="ts" context="module">
-    import {GetAniListItem} from "../wailsjs/go/main/App";
+    import {
-    import type {AniListGetSingleAnime} from "./anilist/types/AniListCurrentUserWatchListType.js";
+        GetAniListItem,
+        GetAniListLoggedInUser,
+        GetSimklLoggedInUser
+    } from "../wailsjs/go/main/App";
+    import type {
+        AniListCurrentUserWatchList,
+        AniListGetSingleAnime
+    } from "./anilist/types/AniListCurrentUserWatchListType.js";
     import {writable} from 'svelte/store'
-    import type {SimklWatchList} from "./simkl/types/simklTypes";
+    import type {SimklUser, SimklWatchList} from "./simkl/types/simklTypes";
+    import {type AniListUser} from "./anilist/types/AniListTypes";
 
     export let aniListAnime: AniListGetSingleAnime
     export let title = writable("")
@@ -10,6 +18,10 @@
     export let aniListLoggedIn = writable(false)
     export let simklLoggedIn = writable(false)
     export let simklWatchList = writable({} as SimklWatchList)
+    export let aniListPrimary = writable(true)
+    export let simklUser = writable({} as SimklUser)
+    export let aniListUser = writable({} as AniListUser)
+    export let aniListWatchlist = writable({} as AniListCurrentUserWatchList)
 
     export function GetAniListSingleItemAndOpenModal(aniId: number, login: boolean): void {
         GetAniListItem(aniId, login).then(result => {
@@ -20,4 +32,18 @@
             anilistModal.set(true)
         })
     }
+
+    export function loginToSimkl(): void {
+        GetSimklLoggedInUser().then(result => {
+            simklUser = result
+            simklLoggedIn.set(true)
+        })
+    }
+
+    export function loginToAniList(): void {
+        GetAniListLoggedInUser().then(result => {
+            aniListUser = result
+            aniListLoggedIn.set(true)
+        })
+    }
 </script>

frontend/src/Header.svelte

@@ -2,6 +2,16 @@
     import logo from "./assets/images/AniTrackLogo.svg"
     import Search from "./Search.svelte"
     import UserDialogue from "./UserHeaderDialogue.svelte";
+    import {
+        aniListLoggedIn,
+        simklLoggedIn
+    } from "./GlobalVariablesAndHelperFunctions.svelte";
+
+    let isAniListLoggedIn: boolean
+    let isSimklLoggedIn: boolean
+
+    aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
+    simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
 
 </script>
 
@@ -11,6 +21,16 @@
             <a href="#" class="flex items-center">
                 <img src={logo} class="mr-3 h-6 sm:h-9" alt="AniTrack Logo" />
             </a>
+
+            <div class="flex space-x-2 items-center">
+                <div>
+                    <a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400 inline-flex items-center justify-center">AniList</a>
+                </div>
+                <div>
+                    <a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400 inline-flex items-center justify-center">Simkl</a>
+                </div>
+            </div>
+
             <div class="flex space-x-4 items-center lg:order-2">
 
                 <Search />