From 10430caddf3c6cdc1432a215347c4115cd9fe5e0 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Sat, 26 Oct 2024 18:02:05 -0400
Subject: [PATCH] added login, icons and theming to user dropdown

---
 .../src/helperComponents/AvatarMenu.svelte    | 47 +++++++++++++++----
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/frontend/src/helperComponents/AvatarMenu.svelte b/frontend/src/helperComponents/AvatarMenu.svelte
index b3de7d9..f18c10c 100644
--- a/frontend/src/helperComponents/AvatarMenu.svelte
+++ b/frontend/src/helperComponents/AvatarMenu.svelte
@@ -4,20 +4,31 @@
     import {
         aniListLoggedIn,
         aniListUser,
+        malUser,
+        simklUser,
         malLoggedIn,
         simklLoggedIn,
+        loginToAniList,
+        loginToMAL,
+        loginToSimkl,
         logoutOfAniList,
         logoutOfMAL,
         logoutOfSimkl,
     } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
     import * as runtime from "../../wailsjs/runtime";
+    import type {MyAnimeListUser} from "../mal/types/MALTypes";
+    import type {SimklUser} from "../simkl/types/simklTypes";
 
     let currentAniListUser: AniListUser;
+    let currentMALUser: MyAnimeListUser;
+    let currentSimklUser: SimklUser;
     let isAniListLoggedIn: boolean;
     let isSimklLoggedIn: boolean;
     let isMALLoggedIn: boolean;
 
     aniListUser.subscribe((value) => (currentAniListUser = value));
+    malUser.subscribe((value) => (currentMALUser = value))
+    simklUser.subscribe(value => currentSimklUser = value)
     aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
     simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
     malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
@@ -59,9 +70,16 @@
                 <li>
                     <button
                         on:click={logoutOfAniList}
-                        class="block px-4 py-2 w-full hover:bg-gray-600 hover:text-white"
+                        class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-green-800 hover:text-white"
                     >
-                        Logout Anilist
+                        <span class="maple-font text-lg text-green-200 mr-4">A</span>Logout {currentAniListUser.data.Viewer.name}
+                    </button>
+                </li>
+                {:else}
+                <li>
+                    <button on:click={loginToAniList}
+                            class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
+                        <span class="maple-font text-lg mr-4">A</span>Login to AniList
                     </button>
                 </li>
             {/if}
@@ -69,9 +87,16 @@
                 <li>
                     <button
                         on:click={logoutOfMAL}
-                        class="block px-4 py-2 w-full hover:bg-gray-600 hover:text-white"
+                        class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-blue-800 hover:text-white"
                     >
-                        Logout MAL
+                        <span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {currentMALUser.name}
+                    </button>
+                </li>
+            {:else}
+                <li>
+                    <button on:click={loginToMAL}
+                            class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
+                        <span class="maple-font text-lg mr-4">M</span>Login to MyAnimeList
                     </button>
                 </li>
             {/if}
@@ -79,9 +104,16 @@
                 <li>
                     <button
                         on:click={logoutOfSimkl}
-                        class="block px-4 py-2 w-full hover:bg-gray-600 hover:text-white"
+                        class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-indigo-800 hover:text-white"
                     >
-                        Logout Simkl
+                        <span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {currentSimklUser.user.name}
+                    </button>
+                </li>
+            {:else}
+                <li>
+                    <button on:click={loginToSimkl}
+                            class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
+                        <span class="maple-font text-lg mr-4">S</span>Login to Simkl
                     </button>
                 </li>
             {/if}
@@ -95,5 +127,4 @@
             </button>
         </div>
     </div>
-</div>
-
+</div>
\ No newline at end of file