feat: implement dynamic sort parameter for AniList watchlist

Add configurable sort functionality to AniList watchlist system:

- Add aniListSort writable store to GlobalVariablesAndHelperFunctions
- Update Pagination component to subscribe to and use dynamic sort parameter
- Refactor CheckIfAniListLoggedInAndLoadWatchList to use sort from store
- Remove hardcoded MediaListSort.UpdatedTimeDesc in favor of configurable sort
- Improve code formatting with arrow functions and consistent spacing
- Add sort parameter to all GetAniListUserWatchingList calls

This allows users to customize their watchlist sorting preference instead of being limited to the default 'updated time descending' sort order.

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 {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>
+

frontend/src/helperComponents/Pagination.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     aniListLoggedIn,
+    aniListSort,
     aniListWatchlist,
     animePerPage,
     watchListPage,
@@ -8,24 +9,21 @@
 
   import type { AniListCurrentUserWatchList } from "../anilist/types/AniListCurrentUserWatchListType";
   import { GetAniListUserWatchingList } from "../../wailsjs/go/main/App";
-  import { MediaListSort } from "../anilist/types/AniListTypes";
 
   let aniListWatchListLoaded: AniListCurrentUserWatchList;
   let page: number;
   let perPage: number;
+  let sort: string;
 
   watchListPage.subscribe((value) => (page = value));
   animePerPage.subscribe((value) => (perPage = value));
   aniListWatchlist.subscribe((value) => (aniListWatchListLoaded = value));
+  aniListSort.subscribe((value) => (sort = value));
 
   const perPageOptions = [10, 20, 50];
 
   function ChangeWatchListPage(newPage: number) {
-    GetAniListUserWatchingList(
-      newPage,
-      perPage,
-      MediaListSort.UpdatedTimeDesc,
-    ).then((result) => {
+    GetAniListUserWatchingList(newPage, perPage, sort).then((result) => {
       watchListPage.set(newPage);
       aniListWatchlist.set(result);
       aniListLoggedIn.set(true);
@@ -45,16 +43,14 @@
   function changeCountPerPage(
     e: Event & { currentTarget: HTMLSelectElement },
   ): void {
-    GetAniListUserWatchingList(
-      1,
-      Number(e.currentTarget.value),
-      MediaListSort.UpdatedTimeDesc,
-    ).then((result) => {
+    GetAniListUserWatchingList(1, Number(e.currentTarget.value), sort).then(
+      (result) => {
         animePerPage.set(Number(e.currentTarget.value));
         watchListPage.set(1);
         aniListWatchlist.set(result);
         aniListLoggedIn.set(true);
-    });
+      },
+    );
   }
 </script>
 

frontend/src/helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte

@@ -1,34 +1,47 @@
 <script lang="ts" context="module">
-    import {CheckIfAniListLoggedIn, GetAniListLoggedInUser, GetAniListUserWatchingList} from "../../wailsjs/go/main/App";
-    import {MediaListSort} from "../anilist/types/AniListTypes";
-    import { aniListUser, watchListPage, animePerPage, aniListPrimary, aniListLoggedIn, aniListWatchlist } from "./GlobalVariablesAndHelperFunctions.svelte"
+  import {
+    CheckIfAniListLoggedIn,
+    GetAniListLoggedInUser,
+    GetAniListUserWatchingList,
+  } from "../../wailsjs/go/main/App";
+  import {
+    aniListUser,
+    watchListPage,
+    animePerPage,
+    aniListPrimary,
+    aniListLoggedIn,
+    aniListWatchlist,
+    aniListSort,
+  } from "./GlobalVariablesAndHelperFunctions.svelte";
 
-    let isAniListPrimary: boolean
-    let page: number
-    let perPage: number
+  let isAniListPrimary: boolean;
+  let page: number;
+  let perPage: number;
+  let sort: string;
 
-    aniListPrimary.subscribe(value => isAniListPrimary = value)
-    watchListPage.subscribe(value => page = value)
-    animePerPage.subscribe(value => perPage = value)
+  aniListPrimary.subscribe((value) => (isAniListPrimary = value));
+  watchListPage.subscribe((value) => (page = value));
+  animePerPage.subscribe((value) => (perPage = value));
+  aniListSort.subscribe((value) => (sort = value));
 
   export const LoadAniListUser = async () => {
-        await GetAniListLoggedInUser().then(user => {
-            aniListUser.set(user)
-        })
-    }
+    await GetAniListLoggedInUser().then((user) => {
+      aniListUser.set(user);
+    });
+  };
 
   export const LoadAniListWatchList = async () => {
-        await GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((watchList) => {
-            aniListWatchlist.set(watchList)
-        })
-    }
+    await GetAniListUserWatchingList(page, perPage, sort).then((watchList) => {
+      aniListWatchlist.set(watchList);
+    });
+  };
 
   export const CheckIfAniListLoggedInAndLoadWatchList = async () => {
-        const loggedIn = await CheckIfAniListLoggedIn()
+    const loggedIn = await CheckIfAniListLoggedIn();
     if (loggedIn) {
-            await LoadAniListUser()
-            if (isAniListPrimary) await LoadAniListWatchList()
-        }
-        aniListLoggedIn.set(loggedIn)
+      await LoadAniListUser();
+      if (isAniListPrimary) await LoadAniListWatchList();
     }
+    aniListLoggedIn.set(loggedIn);
+  };
 </script>

frontend/src/helperModules/GlobalVariablesAndHelperFunctions.svelte

@@ -53,6 +53,7 @@
   export let loading = writable(false);
   export let tableItems = writable([] as TableItems);
   export let watchlistNeedsRefresh = writable(false);
+  export let aniListSort = writable(MediaListSort.UpdatedTimeDesc);
 
   export let watchListPage = writable(1);
   export let animePerPage = writable(20);
@@ -60,6 +61,7 @@
   let isAniListPrimary: boolean;
   let page: number;
   let perPage: number;
+  let sort: string;
   let aniWatchlist: AniListCurrentUserWatchList;
   let currentAniListAnime: AniListGetSingleAnime;
 
@@ -73,6 +75,7 @@
   malLoggedIn.subscribe((value) => (isMalLoggedIn = value));
   simklLoggedIn.subscribe((value) => (isSimklLoggedIn = value));
   aniListAnime.subscribe((value) => (currentAniListAnime = value));
+  aniListSort.subscribe((value) => (sort = value));
 
   export async function GetAnimeSingleItem(
     aniId: number,
@@ -136,11 +139,7 @@
     GetAniListLoggedInUser().then((result) => {
       aniListUser.set(result);
       if (isAniListPrimary) {
-        GetAniListUserWatchingList(
-          page,
-          perPage,
-          MediaListSort.UpdatedTimeDesc,
-        ).then((result) => {
+        GetAniListUserWatchingList(page, perPage, sort).then((result) => {
           aniListWatchlist.set(result);
           aniListLoggedIn.set(true);
         });
@@ -184,4 +183,3 @@
     });
   }
 </script>
-