john-okeefe/Anitrack
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 17 Wiki Activity

refactor: standardize code formatting in AvatarMenu component

Browse Source 
- 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
This commit is contained in:
John O'Keefe
2026-03-22 22:00:48 -04:00
parent 58c9f449e0
commit 1090f112f3
1 changed files with 164 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/helperComponents/AvatarMenu.svelte
View File

@@ -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 {SimklUser} from "../simkl/types/simklTypes";
import type { MyAnimeListUser } from "../mal/types/MALTypes";
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))
simklUser.subscribe(value => currentSimklUser = 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));
@@ -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 toggleBtn = document.querySelector("#userDropdownButton")
let dropdown = document.querySelector("#userDropdown");
let toggleBtn = document.querySelector("#userDropdownButton");
if (!dropdown.contains(event.target as Node) && !toggleBtn.contains(event.target as Node)) {
dropdown.classList.add("hidden")
document.removeEventListener("click", clickOutside)
if (
!dropdown.contains(event.target as Node) &&
!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={() => {
dropdownUser()
loginToAniList()
<button
on:click={() => {
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={() => {
dropdownUser()
loginToMAL()
<button
on:click={() => {
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={() => {
dropdownUser()
loginToSimkl()
<button
on:click={() => {
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()
ShowVersion()
dropdownUser();
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>