refactor: standardize code formatting in AvatarMenu component

- Convert from 4-space to 2-space indentation for consistency
- Improve import statement formatting and alignment
- Fix semicolon usage throughout the component
- Add conditional avatar dot indicator: green when all services (AniList, MAL, Simkl) are logged in, yellow otherwise
- Add missing newline at end of file
- General code style improvements for better readability and consistency with project standards

frontend/src/helperComponents/AvatarMenu.svelte

@@ -13,11 +13,11 @@
     loginToSimkl,
     logoutOfAniList,
     logoutOfMAL,
-        logoutOfSimkl
+    logoutOfSimkl,
   } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
   import * as runtime from "../../wailsjs/runtime";
-    import type {MyAnimeListUser} from "../mal/types/MALTypes";
+  import type { MyAnimeListUser } from "../mal/types/MALTypes";
-    import type {SimklUser} from "../simkl/types/simklTypes";
+  import type { SimklUser } from "../simkl/types/simklTypes";
   import { ShowVersion } from "../../wailsjs/go/main/App";
 
   let currentAniListUser: AniListUser;
@@ -28,8 +28,8 @@
   let isMALLoggedIn: boolean;
 
   aniListUser.subscribe((value) => (currentAniListUser = value));
-    malUser.subscribe((value) => (currentMALUser = value))
+  malUser.subscribe((value) => (currentMALUser = value));
-    simklUser.subscribe(value => currentSimklUser = value)
+  simklUser.subscribe((value) => (currentSimklUser = value));
   aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
   simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
   malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
@@ -39,17 +39,20 @@
     dropdown.classList.toggle("hidden");
 
     if (!dropdown.classList.contains("hidden")) {
-            document.addEventListener("click", clickOutside)
+      document.addEventListener("click", clickOutside);
     }
   }
 
   function clickOutside(event: Event): void {
-        let dropdown = document.querySelector("#userDropdown")
+    let dropdown = document.querySelector("#userDropdown");
-        let toggleBtn = document.querySelector("#userDropdownButton")
+    let toggleBtn = document.querySelector("#userDropdownButton");
 
-        if (!dropdown.contains(event.target as Node) && !toggleBtn.contains(event.target as Node)) {
+    if (
-            dropdown.classList.add("hidden")
+      !dropdown.contains(event.target as Node) &&
-            document.removeEventListener("click", clickOutside)
+      !toggleBtn.contains(event.target as Node)
+    ) {
+      dropdown.classList.add("hidden");
+      document.removeEventListener("click", clickOutside);
     }
   }
 </script>
@@ -60,7 +63,9 @@
       <Avatar
         src={currentAniListUser.data.Viewer.avatar.medium}
         class="cursor-pointer"
-                dot={{ color: "green" }}
+        dot={isAniListLoggedIn && isMALLoggedIn && isSimklLoggedIn
+          ? { color: "green" }
+          : { color: "yellow" }}
       />
     {:else}
       <Avatar class="cursor-pointer" dot={{ color: "red" }} />
@@ -87,16 +92,19 @@
             on:click={logoutOfAniList}
             class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-green-800 hover:text-white"
           >
-                        <span class="maple-font text-lg text-green-200 mr-4">A</span>Logout {currentAniListUser.data.Viewer.name}
+            <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={() => {
+          <button
-                        dropdownUser()
+            on:click={() => {
-                        loginToAniList()
+              dropdownUser();
+              loginToAniList();
             }}
-                            class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
+            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>
@@ -112,11 +120,13 @@
         </li>
       {:else}
         <li>
-                    <button on:click={() => {
+          <button
-                        dropdownUser()
+            on:click={() => {
-                        loginToMAL()
+              dropdownUser();
+              loginToMAL();
             }}
-                            class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
+            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>
@@ -127,16 +137,19 @@
             on:click={logoutOfSimkl}
             class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-indigo-800 hover:text-white"
           >
-                        <span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {currentSimklUser.user.name}
+            <span class="maple-font text-lg text-indigo-200 mr-4">S</span>Logout {currentSimklUser
+              .user.name}
           </button>
         </li>
       {:else}
         <li>
-                    <button on:click={() => {
+          <button
-                        dropdownUser()
+            on:click={() => {
-                        loginToSimkl()
+              dropdownUser();
+              loginToSimkl();
             }}
-                            class="block px-4 py-2 w-full hover:bg-gray-600 truncate hover:text-white">
+            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>
@@ -145,8 +158,8 @@
     <div class="py-2">
       <button
         on:click={() => {
-                        dropdownUser()
+          dropdownUser();
-                        ShowVersion()
+          ShowVersion();
         }}
         class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
       >
@@ -161,3 +174,4 @@
     </div>
   </div>
 </div>
+