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/Anime.svelte

@@ -483,7 +483,10 @@
                     completedAtDate = null;
                 }
               }}
-              class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+              disabled={currentAniListAnime.data.MediaList.progress <= 0}
+              class={currentAniListAnime.data.MediaList.progress <= 0
+                ? "border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+                : "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
             >
               <svg
                 class="w-3 h-3 text-white"
@@ -541,7 +544,27 @@
                   if (startedAtDate === null) startedAtDate = new Date();
                 }
               }}
-              class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+              disabled={(currentAniListAnime.data.MediaList.media.episodes >
+                0 &&
+                currentAniListAnime.data.MediaList.progress >=
+                  currentAniListAnime.data.MediaList.media.episodes) ||
+                (currentAniListAnime.data.MediaList.media.nextAiringEpisode
+                  .episode > 0 &&
+                  currentAniListAnime.data.MediaList.progress >
+                    currentAniListAnime.data.MediaList.media.nextAiringEpisode
+                      .episode -
+                      2)}
+              class={(currentAniListAnime.data.MediaList.media.episodes > 0 &&
+                currentAniListAnime.data.MediaList.progress >=
+                  currentAniListAnime.data.MediaList.media.episodes) ||
+              (currentAniListAnime.data.MediaList.media.nextAiringEpisode
+                .episode > 0 &&
+                currentAniListAnime.data.MediaList.progress >
+                  currentAniListAnime.data.MediaList.media.nextAiringEpisode
+                    .episode -
+                    2)
+                ? "border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+                : "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
             >
               <svg
                 class="w-3 h-3 text-white"

frontend/src/helperComponents/AvatarMenu.svelte

@@ -1,163 +1,177 @@
 <script lang="ts">
-    import { Avatar } from "flowbite-svelte";
+  import { Avatar } from "flowbite-svelte";
-    import type { AniListUser } from "../anilist/types/AniListTypes";
+  import type { AniListUser } from "../anilist/types/AniListTypes";
-    import {
+  import {
-        aniListLoggedIn,
+    aniListLoggedIn,
-        aniListUser,
+    aniListUser,
-        malUser,
+    malUser,
-        simklUser,
+    simklUser,
-        malLoggedIn,
+    malLoggedIn,
-        simklLoggedIn,
+    simklLoggedIn,
-        loginToAniList,
+    loginToAniList,
-        loginToMAL,
+    loginToMAL,
-        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;
-    let currentMALUser: MyAnimeListUser;
+  let currentMALUser: MyAnimeListUser;
-    let currentSimklUser: SimklUser;
+  let currentSimklUser: SimklUser;
-    let isAniListLoggedIn: boolean;
+  let isAniListLoggedIn: boolean;
-    let isSimklLoggedIn: boolean;
+  let isSimklLoggedIn: boolean;
-    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));
 
-    function dropdownUser(): void {
+  function dropdownUser(): void {
-        let dropdown = document.querySelector("#userDropdown");
+    let dropdown = document.querySelector("#userDropdown");
-        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>
 
 <div class="relative">
-    <button id="userDropdownButton" on:click={dropdownUser}>
+  <button id="userDropdownButton" on:click={dropdownUser}>
-        {#if isAniListLoggedIn}
+    {#if isAniListLoggedIn}
-            <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" }
-        {:else}
+          : { color: "yellow" }}
-            <Avatar class="cursor-pointer" dot={{ color: "red" }} />
+      />
-        {/if}
+    {:else}
-    </button>
+      <Avatar class="cursor-pointer" dot={{ color: "red" }} />
-    <div
+    {/if}
-        id="userDropdown"
+  </button>
-        class="absolute hidden right-0 2xl:left-1/2 2xl:-translate-x-1/2 z-10 divide-y rounded-lg shadow w-44 bg-gray-700 divide-gray-600"
+  <div
-    >
+    id="userDropdown"
-        <div class="px-4 py-3 text-sm text-white">
+    class="absolute hidden right-0 2xl:left-1/2 2xl:-translate-x-1/2 z-10 divide-y rounded-lg shadow w-44 bg-gray-700 divide-gray-600"
-            {#if isAniListLoggedIn}
+  >
-                <div>{currentAniListUser.data.Viewer.name}</div>
+    <div class="px-4 py-3 text-sm text-white">
-            {:else}
+      {#if isAniListLoggedIn}
-                <div>You are not logged into AniList</div>
+        <div>{currentAniListUser.data.Viewer.name}</div>
-            {/if}
+      {:else}
-        </div>
+        <div>You are not logged into AniList</div>
-        <ul
+      {/if}
-            class="py-2 text-sm text-gray-200"
-            aria-labelledby="dropdownUserAvatarButton"
-        >
-            {#if isAniListLoggedIn}
-                <li>
-                    <button
-                        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}
-                    </button>
-                </li>
-                {:else}
-                <li>
-                    <button on:click={() => {
-                        dropdownUser()
-                        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}
-            {#if isMALLoggedIn}
-                <li>
-                    <button
-                        on:click={logoutOfMAL}
-                        class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-blue-800 hover:text-white"
-                    >
-                        <span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {currentMALUser.name}
-                    </button>
-                </li>
-            {:else}
-                <li>
-                    <button on:click={() => {
-                        dropdownUser()
-                        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}
-            {#if isSimklLoggedIn}
-                <li>
-                    <button
-                        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}
-                    </button>
-                </li>
-            {:else}
-                <li>
-                    <button on:click={() => {
-                        dropdownUser()
-                        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}
-        </ul>
-        <div class="py-2">
-            <button
-                    on:click={() => {
-                        dropdownUser()
-                        ShowVersion()
-                    }}
-                    class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
-            >
-               Version
-            </button>
-            <button
-                on:click={() => runtime.Quit()}
-                class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
-            >
-                Exit Application
-            </button>
-        </div>
     </div>
-</div>
+    <ul
+      class="py-2 text-sm text-gray-200"
+      aria-labelledby="dropdownUserAvatarButton"
+    >
+      {#if isAniListLoggedIn}
+        <li>
+          <button
+            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}
+          </button>
+        </li>
+      {:else}
+        <li>
+          <button
+            on:click={() => {
+              dropdownUser();
+              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}
+      {#if isMALLoggedIn}
+        <li>
+          <button
+            on:click={logoutOfMAL}
+            class="block px-4 py-2 w-full hover:bg-gray-600 truncate bg-blue-800 hover:text-white"
+          >
+            <span class="maple-font text-lg text-blue-200 mr-4">M</span>Logout {currentMALUser.name}
+          </button>
+        </li>
+      {:else}
+        <li>
+          <button
+            on:click={() => {
+              dropdownUser();
+              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}
+      {#if isSimklLoggedIn}
+        <li>
+          <button
+            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}
+          </button>
+        </li>
+      {:else}
+        <li>
+          <button
+            on:click={() => {
+              dropdownUser();
+              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}
+    </ul>
+    <div class="py-2">
+      <button
+        on:click={() => {
+          dropdownUser();
+          ShowVersion();
+        }}
+        class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
+      >
+        Version
+      </button>
+      <button
+        on:click={() => runtime.Quit()}
+        class="block px-4 py-2 w-full text-sm hover:bg-gray-600 text-gray-200 over:text-white"
+      >
+        Exit Application
+      </button>
+    </div>
+  </div>
+</div>
+

frontend/src/helperComponents/Pagination.svelte

@@ -1,145 +1,224 @@
 <script lang="ts">
-    import {
+  import {
-        aniListLoggedIn,
+    aniListLoggedIn,
-        aniListWatchlist,
+    aniListWatchlist,
-        animePerPage,
+    animePerPage,
-        watchListPage,
+    watchListPage,
-    } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
+  } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
 
-    import type {AniListCurrentUserWatchList} from "../anilist/types/AniListCurrentUserWatchListType"
+  import type { AniListCurrentUserWatchList } from "../anilist/types/AniListCurrentUserWatchListType";
-    import {GetAniListUserWatchingList} from "../../wailsjs/go/main/App";
+  import { GetAniListUserWatchingList } from "../../wailsjs/go/main/App";
-    import {MediaListSort} from "../anilist/types/AniListTypes";
+  import { MediaListSort } from "../anilist/types/AniListTypes";
 
-    let aniListWatchListLoaded: AniListCurrentUserWatchList
+  let aniListWatchListLoaded: AniListCurrentUserWatchList;
-    let page: number
+  let page: number;
-    let perPage: number
+  let perPage: number;
 
-    watchListPage.subscribe(value => page = value)
+  watchListPage.subscribe((value) => (page = value));
-    animePerPage.subscribe(value => perPage = value)
+  animePerPage.subscribe((value) => (perPage = value));
-    aniListWatchlist.subscribe((value) => aniListWatchListLoaded = value)
+  aniListWatchlist.subscribe((value) => (aniListWatchListLoaded = value));
 
-    const perPageOptions = [10, 20, 50]
+  const perPageOptions = [10, 20, 50];
 
-    function ChangeWatchListPage(newPage: number) {
+  function ChangeWatchListPage(newPage: number) {
-        GetAniListUserWatchingList(newPage, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
+    GetAniListUserWatchingList(
-            watchListPage.set(newPage)
+      newPage,
-            aniListWatchlist.set(result)
+      perPage,
-            aniListLoggedIn.set(true)
+      MediaListSort.UpdatedTimeDesc,
-        })
+    ).then((result) => {
-    }
+      watchListPage.set(newPage);
+      aniListWatchlist.set(result);
+      aniListLoggedIn.set(true);
+    });
+  }
 
-    function changePage(e): void {
+  function changePage(
-        if ((e.key === "Enter" || e.key === "Tab") && Number(e.target.value) !== page) ChangeWatchListPage(Number(e.target.value))
+    e: KeyboardEvent & { currentTarget: HTMLInputElement },
-    }
+  ): void {
-
+    if (
-    function changeCountPerPage(e): void {
+      (e.key === "Enter" || e.key === "Tab") &&
-        GetAniListUserWatchingList(1, Number(e.target.value), MediaListSort.UpdatedTimeDesc).then((result) => {
+      Number(e.currentTarget.value) !== page
-            animePerPage.set(Number(e.target.value))
+    )
-            watchListPage.set(1)
+      ChangeWatchListPage(Number(e.currentTarget.value));
-            aniListWatchlist.set(result)
+  }
-            aniListLoggedIn.set(true)
-        })
-    }
 
+  function changeCountPerPage(
+    e: Event & { currentTarget: HTMLSelectElement },
+  ): void {
+    GetAniListUserWatchingList(
+      1,
+      Number(e.currentTarget.value),
+      MediaListSort.UpdatedTimeDesc,
+    ).then((result) => {
+      animePerPage.set(Number(e.currentTarget.value));
+      watchListPage.set(1);
+      aniListWatchlist.set(result);
+      aniListLoggedIn.set(true);
+    });
+  }
 </script>
 
 <div class="mb-8">
-    {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
+  {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
-        <nav aria-label="Page navigation" class="hidden md:block">
+    <nav aria-label="Page navigation" class="hidden md:block">
-            <ul class="inline-flex -space-x-px text-base h-10">
+      <ul class="inline-flex -space-x-px text-base h-10">
-                {#if page === 1}
+        {#if page === 1}
-                    <li>
+          <li>
-                        <button disabled
+            <button
-                                class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 cursor-default">
+              disabled
-                            Previous
+              class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 cursor-default"
-                        </button>
+            >
-                    </li>
+              Previous
-                {:else}
+            </button>
-                    <li>
+          </li>
-                        <button on:click={() => ChangeWatchListPage(page-1)}
+        {:else}
-                                class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white">
+          <li>
-                            Previous
+            <button
-                        </button>
+              on:click={() => ChangeWatchListPage(page - 1)}
-                    </li>
+              class="flex items-center justify-center px-4 h-10 ms-0 leading-tight border border-e-0 rounded-s-lg border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white"
-                {/if}
+            >
-                {#each {length: aniListWatchListLoaded.data.Page.pageInfo.lastPage} as _, i}
+              Previous
-                    {#if i + 1 === page}
+            </button>
-                        <li>
+          </li>
-                            <button on:click={() => ChangeWatchListPage(i+1)}
+        {/if}
-                                    class="flex items-center justify-center px-4 h-10 leading-tight border bg-gray-100 border-gray-700 bg-gray-700 text-white">{i + 1}</button>
+        {#each { length: aniListWatchListLoaded.data.Page.pageInfo.lastPage } as _, i}
-                        </li>
+          {#if i + 1 === page}
-                    {:else}
+            <li>
-                        <li>
+              <button
-                            <button on:click={() => ChangeWatchListPage(i+1)}
+                on:click={() => ChangeWatchListPage(i + 1)}
-                                    class="flex items-center justify-center px-4 h-10 leading-tight border dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white">{i + 1}</button>
+                class="flex items-center justify-center px-4 h-10 leading-tight border hover:bg-gray-100 border-gray-700 bg-gray-700 text-white"
-                        </li>
+                >{i + 1}</button
-                    {/if}
+              >
-                {/each}
+            </li>
-                {#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
+          {:else}
-                    <li>
+            <li>
-                        <button disabled
+              <button
-                                class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 cursor-default">
+                on:click={() => ChangeWatchListPage(i + 1)}
-                            Next
+                class="flex items-center justify-center px-4 h-10 leading-tight border dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white"
-                        </button>
+                >{i + 1}</button
-                    </li>
+              >
-                {:else}
+            </li>
-                    <li>
+          {/if}
-                        <button on:click={() => ChangeWatchListPage(page+1)}
+        {/each}
-                                class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white">
+        {#if page === aniListWatchListLoaded.data.Page.pageInfo.lastPage}
-                            Next
+          <li>
-                        </button>
+            <button
-                    </li>
+              disabled
-                {/if}
+              class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 cursor-default"
-            </ul>
+            >
-        </nav>
+              Next
-    {/if}
+            </button>
-    <div class="flex mt-5">
+          </li>
-        <div class="w-20 mx-auto">
+        {:else}
-            <select bind:value={perPage} on:change={(e) => changeCountPerPage(e)} id="countPerPage"
+          <li>
-                    class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500">
+            <button
-                {#each perPageOptions as option}
+              on:click={() => ChangeWatchListPage(page + 1)}
-                    <option value={option}>
+              class="flex items-center justify-center px-4 h-10 leading-tight border rounded-e-lg dark border-gray-700 text-gray-400 hover:bg-gray-700 hover:text-white"
-                        {option}
+            >
-                    </option>
+              Next
-                {/each}
+            </button>
-            </select>
+          </li>
-        </div>
+        {/if}
-
+      </ul>
-        <div>
+    </nav>
-            <div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div>
+  {/if}
-            {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
+  <div class="flex mt-5">
-                <div class="md:hidden">Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div>
+    <div class="w-20 mx-auto">
-            {:else}
+      <select
-                <div>Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}</div>
+        bind:value={perPage}
-            {/if}
+        on:change={(e) => changeCountPerPage(e)}
-        </div>
+        id="countPerPage"
-
+        class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
-        <div class="max-w-xs mx-auto">
+      >
-            <div class="relative flex items-center max-w-[11rem]">
+        {#each perPageOptions as option}
-                <button type="button" id="decrement-button" on:click={() => ChangeWatchListPage(page-1)}
+          <option value={option}>
-                        class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none">
+            {option}
-                    <svg class="w-3 h-3 text-white" aria-hidden="true"
+          </option>
-                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
+        {/each}
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+      </select>
-                              d="M1 1h16"/>
-                    </svg>
-                </button>
-                <input type="number" min="1" max="{aniListWatchListLoaded.data.Page.pageInfo.lastPage}"
-                       on:keydown={changePage} id="page-counter"
-                       class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none border-x-0 h-11 font-medium text-center text-sm block w-full pb-6 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
-                       value={page} required/>
-                <div class="absolute bottom-1 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 flex items-center text-xs text-gray-400 space-x-1 rtl:space-x-reverse">
-                    <span>Page #</span>
-                </div>
-                <button type="button" id="increment-button" on:click={() => ChangeWatchListPage(page+1)}
-                        class="hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none">
-                    <svg class="w-3 h-3 text-white" aria-hidden="true"
-                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                              d="M9 1v16M1 9h16"/>
-                    </svg>
-                </button>
-            </div>
-        </div>
     </div>
-</div>
+
+    <div>
+      <div>Total Anime: {aniListWatchListLoaded.data.Page.pageInfo.total}</div>
+      {#if aniListWatchListLoaded.data.Page.pageInfo.lastPage <= 12}
+        <div class="md:hidden">
+          Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}
+        </div>
+      {:else}
+        <div>
+          Page: {page} of {aniListWatchListLoaded.data.Page.pageInfo.lastPage}
+        </div>
+      {/if}
+    </div>
+
+    <div class="max-w-xs mx-auto">
+      <div class="relative flex items-center max-w-[11rem]">
+        <button
+          type="button"
+          id="decrement-button"
+          on:click={() => ChangeWatchListPage(page - 1)}
+          class={page <= 1
+            ? "border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+            : "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
+          disabled={page <= 1}
+        >
+          <svg
+            class="w-3 h-3 text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 2"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 1h16"
+            />
+          </svg>
+        </button>
+        <input
+          type="number"
+          min="1"
+          max={aniListWatchListLoaded.data.Page.pageInfo.lastPage}
+          on:keydown={changePage}
+          id="page-counter"
+          class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none border-x-0 h-11 font-medium text-center text-sm block w-full pb-6 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+          value={page}
+          required
+        />
+        <div
+          class="absolute bottom-1 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 flex items-center text-xs text-gray-400 space-x-1 rtl:space-x-reverse"
+        >
+          <span>Page #</span>
+        </div>
+        <button
+          type="button"
+          id="increment-button"
+          on:click={() => ChangeWatchListPage(page + 1)}
+          class={page >= aniListWatchListLoaded.data.Page.pageInfo.lastPage
+            ? "border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+            : "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
+          disabled={page >= aniListWatchListLoaded.data.Page.pageInfo.lastPage}
+        >
+          <svg
+            class="w-3 h-3 text-white"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 18 18"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M9 1v16M1 9h16"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

frontend/src/helperComponents/WatchList.svelte

@@ -58,7 +58,7 @@
                 }}
               >
                 <img
-                  class="rounded-lg"
+                  class="rounded-lg w-[230px] h-[330px] object-cover"
                   src={media.media.coverImage.large}
                   alt={media.media.title.english === ""
                     ? media.media.title.romaji

wails.json

@@ -12,6 +12,6 @@
   },
   "info": {
     "productName": "AniTrack",
-    "productVersion": "0.6.0"
+    "productVersion": "0.6.5"
   }
 }