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, loginToSimkl,
logoutOfAniList, logoutOfAniList,
logoutOfMAL, logoutOfMAL,
logoutOfSimkl logoutOfSimkl,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"; } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import * as runtime from "../../wailsjs/runtime"; 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"; import { ShowVersion } from "../../wailsjs/go/main/App";
let currentAniListUser: AniListUser; let currentAniListUser: AniListUser;
@@ -28,8 +28,8 @@
let isMALLoggedIn: boolean; let isMALLoggedIn: boolean;
aniListUser.subscribe((value) => (currentAniListUser = value)); 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)); aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value)); simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
malLoggedIn.subscribe((value) => (isMALLoggedIn = value)); malLoggedIn.subscribe((value) => (isMALLoggedIn = value));
@@ -39,17 +39,20 @@
dropdown.classList.toggle("hidden"); dropdown.classList.toggle("hidden");
if (!dropdown.classList.contains("hidden")) { if (!dropdown.classList.contains("hidden")) {
document.addEventListener("click", clickOutside) document.addEventListener("click", clickOutside);
} }
} }
function clickOutside(event: Event): void { 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> </script>
@@ -60,7 +63,9 @@
<Avatar <Avatar
src={currentAniListUser.data.Viewer.avatar.medium} src={currentAniListUser.data.Viewer.avatar.medium}
class="cursor-pointer" class="cursor-pointer"
dot={{ color: "green" }} dot={isAniListLoggedIn && isMALLoggedIn && isSimklLoggedIn
? { color: "green" }
: { color: "yellow" }}
/> />
{:else} {:else}
<Avatar class="cursor-pointer" dot={{ color: "red" }} /> <Avatar class="cursor-pointer" dot={{ color: "red" }} />
@@ -87,16 +92,19 @@
on:click={logoutOfAniList} on:click={logoutOfAniList}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-green-800 hover:text-white" 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> </button>
</li> </li>
{:else} {:else}
<li> <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 <span class="maple-font text-lg mr-4">A</span>Login to AniList
</button> </button>
</li> </li>
@@ -112,11 +120,13 @@
</li> </li>
{:else} {:else}
<li> <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 <span class="maple-font text-lg mr-4">M</span>Login to MyAnimeList
</button> </button>
</li> </li>
@@ -127,16 +137,19 @@
on:click={logoutOfSimkl} on:click={logoutOfSimkl}
class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-indigo-800 hover:text-white" 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> </button>
</li> </li>
{:else} {:else}
<li> <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 <span class="maple-font text-lg mr-4">S</span>Login to Simkl
</button> </button>
</li> </li>
@@ -145,8 +158,8 @@
<div class="py-2"> <div class="py-2">
<button <button
on:click={() => { 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" 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> </div>
</div> </div>