moved login data to header

frontend/src/App.svelte

@@ -9,9 +9,7 @@
         aniListUser,
         aniListPrimary,
         aniListWatchlist,
-        loginToAniList,
         GetAniListSingleItemAndOpenModal,
-        loginToSimkl
     } from "./GlobalVariablesAndHelperFunctions.svelte";
     import {
         CheckIfAniListLoggedIn,
@@ -21,28 +19,21 @@
         GetSimklLoggedInUser,
         SimklGetUserWatchlist,
     } from "../wailsjs/go/main/App";
-    import {type AniListUser, MediaListSort} from "./anilist/types/AniListTypes";
+    import {MediaListSort} from "./anilist/types/AniListTypes";
     import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
     import Header from "./Header.svelte";
-    import {Button, Rating} from "flowbite-svelte";
+    import {Rating} from "flowbite-svelte";
     import {default as Modal} from "./modal/Modal.svelte"
     import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
     import {onMount} from "svelte";
-    import type {SimklUser} from "./simkl/types/simklTypes";
 
 
 
     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)
 
@@ -85,18 +76,6 @@
 <Header/>
 
 <main>
-    {#if isAniListLoggedIn}
-        <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, {currentSimklUser.user.name}</div>
-    {:else}
-        <Button class="btn" on:click={loginToSimkl}>Login to Simkl</Button>
-    {/if}
-
     {#if isAniListLoggedIn}
         <div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8">
             <h1 class="text-left text-xl font-bold mb-4">Your Watching List</h1>

frontend/src/Header.svelte

@@ -4,14 +4,24 @@
     import UserDialogue from "./UserHeaderDialogue.svelte";
     import {
         aniListLoggedIn,
-        simklLoggedIn
+        simklLoggedIn,
-    } from "./GlobalVariablesAndHelperFunctions.svelte";
+        loginToSimkl,
+        loginToAniList,
+        aniListUser,
+        simklUser
+    } from "./GlobalVariablesAndHelperFunctions.svelte"
+    import type {AniListUser} from "./anilist/types/AniListTypes";
+    import type {SimklUser} from "./simkl/types/simklTypes";
 
     let isAniListLoggedIn: boolean
     let isSimklLoggedIn: boolean
+    let currentAniListUser: AniListUser
+    let currentSimklUser: SimklUser
 
     aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
     simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
+    aniListUser.subscribe((value) => currentAniListUser = value)
+    simklUser.subscribe((value) => currentSimklUser = value)
 
 </script>
 
@@ -24,10 +34,18 @@
 
             <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>
+                    {#if isAniListLoggedIn}
+                        <span class="bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300 cursor-default">AniList: {currentAniListUser.data.Viewer.name}</span>
+                    {:else}
+                        <button on:click={loginToAniList} 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</button>
+                    {/if}
                 </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>
+                    {#if isSimklLoggedIn}
+                        <span class="bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300 cursor-default">Simkl: {currentSimklUser.user.name}</span>
+                    {:else}
+                        <button on:click={loginToSimkl} 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</button>
+                    {/if}
                 </div>
             </div>