Bump version to 0.5.3

- Update productVersion in wails.json from 0.5.2 to 0.5.3

.gitignore

@@ -30,3 +30,9 @@ package-lock.json
 .idea
 .env
 environment.go
+
+# REST (http files)
+http-client.private.env.json
+
+# Build artifacts
+build/*.tar.gz

AniListFunctions.go

@@ -93,6 +93,7 @@ func (a *App) GetAniListItem(aniId int, login bool) AniListGetSingleAnime {
 					timeUntilAiring
 					episode
 				  }
+				  genres
 				  tags{
 					id
 					name
@@ -222,6 +223,7 @@ func (a *App) AniListSearch(query string) any {
 						  timeUntilAiring
 						  episode
 						}
+						genres
 						tags{
 							id
 							name
@@ -307,6 +309,7 @@ func (a *App) GetAniListUserWatchingList(page int, perPage int, sort string) Ani
 						  timeUntilAiring
 						  episode
 						}
+						genres
 						tags{
 						  id
 						  name

AniListTypes.go

@@ -74,7 +74,8 @@ type MediaList struct {
 			TimeUntilAiring int `json:"timeUntilAiring"`
 			Episode         int `json:"episode"`
 		} `json:"nextAiringEpisode"`
-		Tags []struct {
+		Genres []string `json:"genres"`
+		Tags   []struct {
 			Id             int    `json:"id"`
 			Name           string `json:"name"`
 			Description    string `json:"description"`

MALUserFunctions.go

@@ -308,7 +308,16 @@ func refreshMyAnimeListAuthorizationToken() {
 
 func (a *App) GetMyAnimeListLoggedInUser() MyAnimeListUser {
 	a.MyAnimeListLogin()
+	user := createUser()
+	if user.Name == "" {
+		refreshMyAnimeListAuthorizationToken()
+		user = createUser()
+	}
 
+	return user
+}
+
+func createUser() MyAnimeListUser {
 	client := &http.Client{}
 
 	req, _ := http.NewRequest("GET", "https://api.myanimelist.net/v2/users/@me?fields=anime_statistics", nil)
@@ -335,6 +344,7 @@ func (a *App) GetMyAnimeListLoggedInUser() MyAnimeListUser {
 	}
 
 	return user
+
 }
 
 func (a *App) LogoutMyAnimeList() string {

SimklFunctions.go

@@ -262,7 +262,6 @@ func (a *App) SimklSearch(aniListAnime MediaList) SimklAnime {
 		if len(anime) == 0 {
 			url = "https://api.simkl.com/search/id?mal=" + strconv.Itoa(aniListAnime.Media.IDMal)
 			respBody = SimklHelper("GET", url, nil)
-			fmt.Println(string(respBody))
 			err = json.Unmarshal(respBody, &anime)
 		}
 

app.go

@@ -3,9 +3,11 @@ package main
 import (
 	"context"
 	_ "embed"
+	"log"
+	"strings"
+
 	"github.com/wailsapp/wails/v2/pkg/options"
 	"github.com/wailsapp/wails/v2/pkg/runtime"
-	"strings"
 
 	"github.com/tidwall/gjson"
 )
@@ -43,3 +45,14 @@ func (a *App) onSecondInstanceLaunch(secondInstanceData options.SecondInstanceDa
 	runtime.Show(*wailsContext)
 	go runtime.EventsEmit(*wailsContext, "launchArgs", secondInstanceArgs)
 }
+
+func (a *App) ShowVersion() {
+	version := gjson.Get(wailsJSON, "info.productVersion")
+	_, err := runtime.MessageDialog(*wailsContext, runtime.MessageDialogOptions{
+		Title:   "Version",
+		Message: "AniTrack Version: " + version.String(),
+	})
+	if err != nil {
+		log.Println(err)
+	}
+}

bruno/AniTrack/AniList/Get Items/AniList Item.bru

@@ -25,6 +25,7 @@ body:graphql {
       media {
         id
         idMal
+        genres
         tags {
           id
           name

bruno/AniTrack/AniList/Get Items/AniList Search.bru

@@ -33,6 +33,7 @@ body:graphql {
   						  english
   						  native
   						}
+        genre
   						description
   						coverImage {
   						  large

bruno/AniTrack/AniList/GetAuthorizationToken.bru

@@ -12,7 +12,7 @@ post {
 
 headers {
   Accept: application/json
-  Content-Type: application/json
+  Content-Type: application/x-www-form-urlencoded
 }
 
 body:form-urlencoded {
@@ -20,7 +20,7 @@ body:form-urlencoded {
   client_id: {{ANILIST_APP_ID}}
   client_secret: {{ANILIST_SECRET_TOKEN}}
   redirect_uri: http://localhost:6734/callback
-  code: {{code}}
+  code: {{ANILIST_CODE}}
 }
 
 body:multipart-form {

bruno/AniTrack/environments/Dev.bru

@@ -9,7 +9,7 @@ vars {
 }
 vars:secret [
   ANILIST_ACCESS_TOKEN,
-  code,
+  ANILIST_CODE,
   SIMKL_AUTH_TOKEN,
   MAL_CODE,
   MAL_VERIFIER,

build/install_linux.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# copy desktop file
+if [ -e "~/.local/share/applications/AniTrack.desktop" ]; then
+  if [ -d "~/.local/share/applications/" ]; then
+    cp ./AniTrack.desktop ~/.local/share/applications/
+  else
+    mkdir -p ~/.local/share/applications/
+    cp ./AniTrack.desktop ~/.local/share/applications/
+  fi
+fi
+
+# copy icons to xdg folders
+for size in 32 48 64 128; do
+  xdg-icon-resource install --novendor --context apps --size $size ./icon/$size/AniTrack.png AniTrack
+done
+
+# copy AniTrack Binary to $HOME/Applications/
+if ! [ -d "~/Applications" ]; then
+  mkdir -p ~/Applications
+  cp ./bin/AniTrack ~/Applications/
+elif ! [[ -e ~/Applications/AniTrack ]]; then
+  cp ./bin/AniTrack ~/Applications/
+fi
+
+echo "AniTrack has been successfully installed."

frontend/package.json

@@ -16,7 +16,7 @@
     "postcss": "^8.4.45",
     "svelte": "^4.0.0",
     "svelte-check": "^3.4.3",
-    "svelte-headless-table": "^0.18.2",
+    "svelte-headless-table": "^0.18.3",
     "svelte-preprocess": "^5.0.3",
     "svelte-spa-router": "^4.0.1",
     "tailwind-merge": "^2.5.2",

frontend/src/App.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import {
-        aniListAnime,
+        aniListLoggedIn,
-        GetAnimeSingleItem,
+        malLoggedIn,
+        simklLoggedIn,
     } from "./helperModules/GlobalVariablesAndHelperFunctions.svelte";
     import {onMount} from "svelte";
     import Router from "svelte-spa-router"
@@ -13,12 +14,19 @@
     import { CheckIfMALLoggedInAndSetUser } from "./helperModules/CheckIfMyAnimeListLoggedIn.svelte";
     import {CheckIfSimklLoggedInAndSetUser} from "./helperModules/CheckIsSimklLoggedIn.svelte"
     import {CheckIfAniListLoggedIn} from "../wailsjs/go/main/App";
-    import {AniListGetSingleAnimeDefaultData} from "./helperDefaults/AniListGetSingleAnime";
 
     onMount(async () => {
-        await CheckIfAniListLoggedInAndLoadWatchList()
+        let isAniListLoggedIn: boolean
-        await CheckIfMALLoggedInAndSetUser()
+        let isMALLoggedIn: boolean
-        await CheckIfSimklLoggedInAndSetUser()
+        let isSimklLoggedIn: boolean
+        aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
+        malLoggedIn.subscribe((value) => isMALLoggedIn = value)
+        simklLoggedIn.subscribe((value) => isSimklLoggedIn = value)
+
+        console.log(isAniListLoggedIn)
+        !isAniListLoggedIn && await CheckIfAniListLoggedInAndLoadWatchList()
+        !isMALLoggedIn && await CheckIfMALLoggedInAndSetUser()
+        !isSimklLoggedIn && await CheckIfSimklLoggedInAndSetUser()
     })
 </script>
 
@@ -27,17 +35,7 @@
     '/': Home,
     '/anime/:id': wrap({
         asyncComponent: () => import('./routes/AnimeRoutePage.svelte'),
-        conditions: [
+        conditions: [async () => await CheckIfAniListLoggedIn()],
-            async () => await CheckIfAniListLoggedIn(),
-            async (detail) => {
-                aniListAnime.update(value => {
-                    value = AniListGetSingleAnimeDefaultData
-                    return value
-                })
-                await GetAnimeSingleItem(Number(detail.params.id), true)
-                return Object.keys($aniListAnime).length!==0
-            },
-        ],
         loadingComponent: Spinner
     }),
     // '*': "Not Found"

frontend/src/anilist/types/AniListCurrentUserWatchListType.ts

@@ -1,80 +1,94 @@
 export interface AniListCurrentUserWatchList {
-    data: {
+  data: {
-        Page: {
+    Page: {
-            pageInfo: {
+      pageInfo: {
-                total: number
+        total: number;
-                perPage: number
+        perPage: number;
-                currentPage: number
+        currentPage: number;
-                lastPage: number
+        lastPage: number;
-                hasNextPage: boolean
+        hasNextPage: boolean;
-            },
+      };
-            mediaList: MediaList[]
+      mediaList: MediaList[];
-        }
+    };
-    }
+  };
 }
 
 export interface AniListGetSingleAnime {
-    data: {
+  data: {
-        MediaList: MediaList
+    MediaList: MediaList;
-    }
+  };
 }
 
 export interface MediaList {
-    id: number
+  id: number;
-    mediaId: number
+  mediaId: number;
-    userId: number
+  userId: number;
-    media: {
+  media: {
-        id: number
+    id: number;
-        idMal: number
+    idMal: number;
-        title: {
+    title: {
-            romaji: string
+      romaji: string;
-            english?: string
+      english?: string;
-            native: string
+      native: string;
-        }
+    };
-        description: string
+    description: string;
-        coverImage: {
+    coverImage: {
-            large: string
+      large: string;
-        }
+    };
-        season: string
+    season: string;
-        seasonYear: number
+    seasonYear: number;
-        status: string
+    status: string;
-        episodes?: number
+    episodes?: number;
-        nextAiringEpisode?: {
+    nextAiringEpisode?: {
-            airingAt: number
+      airingAt: number;
-            timeUntilAiring: number
+      timeUntilAiring: number;
-            episode: number
+      episode: number;
-        }
+    };
-    }
+    genres: string[];
-    status: string
+    tags: [
-    startedAt: {
+      {
-        year: number
+        id: number;
-        month: number
+        name: string;
-        day: number
+        description: string;
-    }
+        rank: number;
-    completedAt: {
+        isMediaSpoiler: boolean;
-        year?: number
+        isAdult: boolean;
-        month?: number
+      },
-        day?: number
+    ];
-    }
+    isAdult: boolean;
-    notes?: string
+  };
-    progress: number
+  status: string;
-    score: number
+  startedAt: {
-    repeat: number
+    year: number;
-    user: {
+    month: number;
-        id: number
+    day: number;
-        name: string
+  };
-        avatar: {
+  completedAt: {
-            large: string
+    year?: number;
-            medium: string
+    month?: number;
-        }
+    day?: number;
-        statistics: {
+  };
-            anime: {
+  notes?: string;
-                count: number
+  progress: number;
-                statuses: [{
+  score: number;
-                    status: string
+  repeat: number;
-                    count: number
+  user: {
-                }]
+    id: number;
-            }
+    name: string;
-        }
+    avatar: {
-    }
+      large: string;
+      medium: string;
+    };
+    statistics: {
+      anime: {
+        count: number;
+        statuses: [
+          {
+            status: string;
+            count: number;
+          },
+        ];
+      };
+    };
+  };
 }

frontend/src/helperComponents/AnimeTable.svelte

@@ -4,19 +4,19 @@
         createTable,
         Render,
         Subscribe,
-    } from "svelte-headless-table"
+    } from "svelte-headless-table";
     // @ts-ignore
-    import { addSortBy } from "svelte-headless-table/plugins"
+    import { addSortBy } from "svelte-headless-table/plugins";
-    import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
+    import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
-    import WebsiteLink from "./WebsiteLink.svelte"
+    import WebsiteLink from "./WebsiteLink.svelte";
 
     //when adding sort here is code { sort: addSortBy() }
-    const table = createTable(tableItems, { sort: addSortBy() })
+    const table = createTable(tableItems, { sort: addSortBy() });
 
     const columns = table.createColumns([
         table.column({
             header: "Service Id",
-            cell: ({ value }) => createRender(WebsiteLink, {id: value}),
+            cell: ({ value }) => createRender(WebsiteLink, { id: value }),
             accessor: "id",
         }),
         table.column({
@@ -55,11 +55,11 @@
             header: "Notes",
             accessor: "notes",
         }),
-    ])
+    ]);
 
     //add pluginStates when add sort back
     const { headerRows, rows, tableAttrs, tableBodyAttrs } =
-        table.createViewModel(columns)
+        table.createViewModel(columns);
 </script>
 
 <div class="relative overflow-x-auto rounded-lg mb-5">

frontend/src/helperComponents/AvatarMenu.svelte

@@ -13,11 +13,12 @@
         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 { ShowVersion } from "../../wailsjs/go/main/App";
 
     let currentAniListUser: AniListUser;
     let currentMALUser: MyAnimeListUser;
@@ -36,6 +37,20 @@
     function dropdownUser(): void {
         let dropdown = document.querySelector("#userDropdown");
         dropdown.classList.toggle("hidden");
+
+        if (!dropdown.classList.contains("hidden")) {
+            document.addEventListener("click", clickOutside)
+        }
+    }
+
+    function clickOutside(event: Event): void {
+        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)
+        }
     }
 </script>
 
@@ -77,7 +92,10 @@
                 </li>
                 {:else}
                 <li>
-                    <button on:click={loginToAniList}
+                    <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>
@@ -94,7 +112,10 @@
                 </li>
             {:else}
                 <li>
-                    <button on:click={loginToMAL}
+                    <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>
@@ -111,7 +132,10 @@
                 </li>
             {:else}
                 <li>
-                    <button on:click={loginToSimkl}
+                    <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>
@@ -119,6 +143,15 @@
             {/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"

frontend/src/helperComponents/Datepicker.svelte

@@ -50,19 +50,19 @@
     function getFocusRingClass(color: Button["color"]): string {
         switch (color) {
             case "primary":
-                return "focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400";
+                return "focus:ring-2 focus:ring-primary-400";
             case "blue":
-                return "focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400";
+                return "focus:ring-2 focus:ring-blue-400";
             case "red":
-                return "focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400";
+                return "focus:ring-2 focus:ring-red-400";
             case "green":
-                return "focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400";
+                return "focus:ring-2 focus:ring-green-400";
             case "yellow":
-                return "focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400";
+                return "focus:ring-2 focus:ring-yellow-400";
             case "purple":
-                return "focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400";
+                return "focus:ring-2 focus:ring-purple-400";
             case "slate":
-                return "focus:ring-2 focus:ring-slate-500 dark:focus:ring-slate-400";
+                return "focus:ring-2 focus:ring-slate-400";
             default:
                 return "";
         }
@@ -71,19 +71,19 @@
     function getRangeBackgroundClass(color: Button["color"]): string {
         switch (color) {
             case "primary":
-                return "bg-primary-100 dark:bg-primary-900";
+                return "bg-primary-900";
             case "blue":
-                return "bg-blue-100 dark:bg-blue-900";
+                return "bg-blue-900";
             case "red":
-                return "bg-red-100 dark:bg-red-900";
+                return "bg-red-900";
             case "green":
-                return "bg-green-100 dark:bg-green-900";
+                return "bg-green-900";
             case "yellow":
-                return "bg-yellow-100 dark:bg-yellow-900";
+                return "bg-yellow-900";
             case "purple":
-                return "bg-purple-100 dark:bg-purple-900";
+                return "bg-purple-900";
             case "slate":
-                return "bg-slate-100 dark:bg-slate-900";
+                return "bg-slate-900";
             default:
                 return "";
         }
@@ -297,7 +297,7 @@
             <input
                 bind:this={inputElement}
                 type="text"
-                class="w-full px-4 py-3 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(
+                class="w-full px-4 py-3 text-sm border rounded-md focus:outline-none bg-gray-700 text-white border-gray-600 {getFocusRingClass(
                     color,
                 )} {inputClass}"
                 {placeholder}
@@ -313,13 +313,13 @@
             />
             <button
                 type="button"
-                class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400 focus:outline-none"
+                class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 focus:outline-none"
                 on:click={() => (isOpen = !isOpen)}
                 {disabled}
                 aria-label={isOpen ? "Close date picker" : "Open date picker"}
             >
                 <svg
-                    class="w-4 h-4 text-gray-500 dark:text-gray-400"
+                    class="w-4 h-4 text-gray-400"
                     aria-hidden="true"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="currentColor"
@@ -339,14 +339,14 @@
             id="datepicker-dropdown"
             class="
         {inline ? '' : 'absolute z-10 mt-1'}
-        bg-white dark:bg-gray-800 rounded-md shadow-lg"
+        bg-gray-800 rounded-md shadow-lg"
             transition:fade={{ duration: 100 }}
             role="dialog"
             aria-label="Calendar"
         >
             <div class="p-4" role="application">
                 {#if title}
-                    <h2 class="text-lg font-semibold mb-4 dark:text-white">
+                    <h2 class="text-lg font-semibold mb-4 text-white">
                         {title}
                     </h2>
                 {/if}
@@ -358,7 +358,7 @@
                         aria-label="Previous month"
                     >
                         <svg
-                            class="w-3 h-3 rtl:rotate-180 text-white dark:text-white"
+                            class="w-3 h-3 rtl:rotate-180 text-white"
                             aria-hidden="true"
                             xmlns="http://www.w3.org/2000/svg"
                             fill="none"
@@ -373,7 +373,7 @@
                         >
                     </Button>
                     <h3
-                        class="text-lg font-semibold dark:text-white"
+                        class="text-lg font-semibold text-white"
                         aria-live="polite"
                     >
                         {currentMonth.toLocaleString(locale, {
@@ -388,7 +388,7 @@
                         aria-label="Next month"
                     >
                         <svg
-                            class="w-3 h-3 rtl:rotate-180 text-white dark:text-white"
+                            class="w-3 h-3 rtl:rotate-180 text-white"
                             aria-hidden="true"
                             xmlns="http://www.w3.org/2000/svg"
                             fill="none"
@@ -406,7 +406,7 @@
                 <div class="grid grid-cols-7 gap-1" role="grid">
                     {#each weekdays as day}
                         <div
-                            class="text-center text-sm font-medium text-gray-500 dark:text-gray-400"
+                            class="text-center text-sm font-medium text-gray-400"
                             role="columnheader"
                         >
                             {day}
@@ -418,7 +418,7 @@
                             size="sm"
                             class="w-full h-8 {day.getMonth() !==
                             currentMonth.getMonth()
-                                ? 'text-gray-300 dark:text-gray-600'
+                                ? 'text-gray-600'
                                 : ''} {isToday(day)
                                 ? 'font-bold'
                                 : ''} {isInRange(day)

frontend/src/helperComponents/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Search from "./Search.svelte"
+    import Search from "./Search.svelte";
     import {
         aniListLoggedIn,
         loginToAniList,
@@ -7,55 +7,81 @@
         loginToSimkl,
         malLoggedIn,
         simklLoggedIn,
-    } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
+    } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
     import AvatarMenu from "./AvatarMenu.svelte";
-    import logo from "../assets/images/AniTrackLogo.svg"
+    import logo from "../assets/images/AniTrackLogo.svg";
+    import { link } from "svelte-spa-router";
 
-    let isAniListLoggedIn: boolean
+    let isAniListLoggedIn: boolean;
-    let isSimklLoggedIn: boolean
+    let isSimklLoggedIn: boolean;
-    let isMALLoggedIn: boolean
+    let isMALLoggedIn: boolean;
 
-    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));
 </script>
 
 <nav class="border-gray-200 bg-gray-900">
-    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+    <div
+        class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"
+    >
         <div class="flex items-center space-x-3 rtl:space-x-reverse">
-                <a href="/"><img src={logo} class="h-8" alt="AniTrack Logo"/></a>
+            <a href="/" use:link
+                ><img src={logo} class="h-8" alt="AniTrack Logo" /></a
+            >
         </div>
-        <div class="flex items-center min-[950px]:order-2 space-x-3 min-[950px]:space-x-0 rtl:space-x-reverse">
+        <div
+            class="flex items-center min-[950px]:order-2 space-x-3 min-[950px]:space-x-0 rtl:space-x-reverse"
+        >
             <div class="min-[950px]:block min-[950px]:mr-4">
                 <Search />
             </div>
-            <AvatarMenu/>
+            <AvatarMenu />
-            <button on:click={() => {
+            <button
-                let menu = document.querySelector("#navbar-user")
+                on:click={() => {
-                menu.classList.toggle("hidden")
+                    let menu = document.querySelector("#navbar-user");
-            }} type="button"
+                    menu.classList.toggle("hidden");
-                    class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg min-[950px]:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-700 focus:ring-gray-600"
+                }}
-                    aria-controls="navbar-user" aria-expanded="false">
+                type="button"
+                class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg min-[950px]:hidden focus:outline-none focus:ring-2 text-gray-400 hover:bg-gray-700 focus:ring-gray-600"
+                aria-controls="navbar-user"
+                aria-expanded="false"
+            >
                 <span class="sr-only">Open main menu</span>
-                <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                <svg
-                     viewBox="0 0 17 14">
+                    class="w-5 h-5"
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    aria-hidden="true"
-                          d="M1 1h15M1 7h15M1 13h15"/>
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 17 14"
+                >
+                    <path
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M1 1h15M1 7h15M1 13h15"
+                    />
                 </svg>
             </button>
         </div>
-        <div class="hidden items-center justify-between w-full pb-4 min-[950px]:pb-0 min-[950px]:flex min-[950px]:w-auto min-[950px]:order-1 border border-gray-700 min-[950px]:border-0 bg-gray-800 min-[950px]:bg-transparent rounded-lg" id="navbar-user">
+        <div
-            <ul class="flex flex-col font-medium pb-6 min-[950px]:p-0 mt-4 min-[950px]:space-x-8 rtl:space-x-reverse min-[950px]:flex-row min-[950px]:mt-0">
+            class="hidden items-center justify-between w-full pb-4 min-[950px]:pb-0 min-[950px]:flex min-[950px]:w-auto min-[950px]:order-1 border border-gray-700 min-[950px]:border-0 bg-gray-800 min-[950px]:bg-transparent rounded-lg"
+            id="navbar-user"
+        >
+            <ul
+                class="flex flex-col font-medium pb-6 min-[950px]:p-0 mt-4 min-[950px]:space-x-8 rtl:space-x-reverse min-[950px]:flex-row min-[950px]:mt-0"
+            >
                 <li>
                     {#if !isAniListLoggedIn}
                         <button on:click={loginToAniList}>
-<!--                                class="block py-2 px-3 w-full min-[950px]:w-auto rounded text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
+                            <!--                                class="block py-2 px-3 w-full min-[950px]:w-auto rounded text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
                             AniList Login
                         </button>
                     {/if}
                     {#if !isMALLoggedIn}
                         <button on:click={loginToMAL}>
-<!--                                class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:p-0 text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
+                            <!--                                class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:p-0 text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
                             MyAnimeList Login
                         </button>
                     {/if}
@@ -63,14 +89,14 @@
                 <li>
                     {#if !isSimklLoggedIn}
                         <button on:click={loginToSimkl}>
-<!--                                class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:p-0 text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
+                            <!--                                class="block py-2 px-3 w-full min-[950px]:w-auto rounded min-[950px]:p-0 text-gray-300 min-[950px]:hover:text-blue-500 hover:bg-gray-700 hover:text-white min-[950px]:hover:bg-transparent border-gray-700">-->
                             Simkl Login
                         </button>
                     {/if}
                 </li>
             </ul>
             <div class="flex justify-center min-[950px]:hidden">
-                <Search/>
+                <Search />
             </div>
         </div>
     </div>

frontend/src/helperComponents/WebsiteLink.svelte

@@ -1,28 +1,32 @@
 <script lang="ts">
-  import {BrowserOpenURL} from "../../wailsjs/runtime"
+    import { BrowserOpenURL } from "../../wailsjs/runtime";
 
-  export let id: string
+    export let id: string;
-  let url = ""
+    export let url = "";
-  let isAniList = false
+    let isAniList = false;
-  let isMAL = false
+    let isMAL = false;
-  let isSimkl = false
+    let isSimkl = false;
-  let newId = id
+    let newId = id;
-  let re = /[ams]?-?(.*)/
+    let re = /[ams]?-?(.*)/;
-  if (id !== undefined && id.length > 0) {
+    if (id !== undefined && id.length > 0) {
-    isAniList = id.includes("a-")
+        isAniList = id.includes("a-");
-    isMAL = id.includes("m-")
+        isMAL = id.includes("m-");
-    isSimkl = id.includes("s-")
+        isSimkl = id.includes("s-");
-    newId = id.match(re)[1]
+        if (isAniList || isMAL || isSimkl) newId = id.match(re)[1];
-  }
+        else newId = id;
+    }
 
-
+    if (isAniList) url = `https://anilist.co/anime/${newId}`;
-  if (isAniList) url = `https://anilist.co/anime/${newId}`
+    if (isMAL) url = `https://myanimelist.net/anime/${newId}`;
-  if (isMAL) url = `https://myanimelist.net/anime/${newId}`
+    if (isSimkl) url = `https://simkl.com/anime/${newId}`;
-  if (isSimkl) url = `https://simkl.com/anime/${newId}`
 </script>
 
 {#if url.length > 0}
-  <button class="underline underline-offset-2 px-4 py-1" on:click={() => BrowserOpenURL(url)}>{newId}</button>
+    <button
+        type="button"
+        class="underline underline-offset-2 px-4 py-1"
+        on:click={() => BrowserOpenURL(url)}>{newId}</button
+    >
 {:else}
-  {id}
+    {id}
 {/if}

frontend/src/routes/AnimeRoutePage.svelte

@@ -1,9 +1,23 @@
 <script lang="ts">
+    import { aniListAnime, GetAnimeSingleItem } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
     import Anime from "../helperComponents/Anime.svelte"
+    import { AniListGetSingleAnimeDefaultData } from "../helperDefaults/AniListGetSingleAnime";
+    import Spinner from "../helperComponents/Spinner.svelte";
 
     export let params: Record<string, string>
+    let loadPromise = load(params.id)
+    $: loadPromise = load(params.id)
+
+    async function load(id: string) {
+        aniListAnime.update(() => AniListGetSingleAnimeDefaultData)
+        await GetAnimeSingleItem(Number(id), true)
+    }
 </script>
 
 {#key params.id}
-    <Anime />
+    {#await loadPromise}
+        <Spinner />
+    {:then _}
+        <Anime />
+    {/await}
 {/key}

frontend/wailsjs/go/main/App.d.ts

@@ -42,6 +42,8 @@ export function MyAnimeListLogin():Promise<void>;
 
 export function MyAnimeListUpdate(arg1:main.MALAnime,arg2:main.MALUploadStatus):Promise<main.MalListStatus>;
 
+export function ShowVersion():Promise<void>;
+
 export function SimklGetUserWatchlist():Promise<main.SimklWatchListType>;
 
 export function SimklLogin():Promise<void>;

frontend/wailsjs/go/main/App.js

@@ -82,6 +82,10 @@ export function MyAnimeListUpdate(arg1, arg2) {
   return window['go']['main']['App']['MyAnimeListUpdate'](arg1, arg2);
 }
 
+export function ShowVersion() {
+  return window['go']['main']['App']['ShowVersion']();
+}
+
 export function SimklGetUserWatchlist() {
   return window['go']['main']['App']['SimklGetUserWatchlist']();
 }

frontend/wailsjs/go/models.ts

@@ -364,7 +364,7 @@ export namespace main {
 	    id: number;
 	    mediaId: number;
 	    userId: number;
-	    // Go type: struct { ID int "json:\"id\""; IDMal int "json:\"idMal\""; Title struct { Romaji string "json:\"romaji\""; English string "json:\"english\""; Native string "json:\"native\"" } "json:\"title\""; Description string "json:\"description\""; CoverImage struct { Large string "json:\"large\"" } "json:\"coverImage\""; Season string "json:\"season\""; SeasonYear int "json:\"seasonYear\""; Status string "json:\"status\""; Episodes int "json:\"episodes\""; NextAiringEpisode struct { AiringAt int "json:\"airingAt\""; TimeUntilAiring int "json:\"timeUntilAiring\""; Episode int "json:\"episode\"" } "json:\"nextAiringEpisode\""; Tags []struct { Id int "json:\"id\""; Name string "json:\"name\""; Description string "json:\"description\""; Rank int "json:\"rank\""; IsMediaSpoiler bool "json:\"isMediaSpoiler\""; IsAdult bool "json:\"isAdult\"" } "json:\"tags\""; IsAdult bool "json:\"isAdult\"" }
+	    // Go type: struct { ID int "json:\"id\""; IDMal int "json:\"idMal\""; Title struct { Romaji string "json:\"romaji\""; English string "json:\"english\""; Native string "json:\"native\"" } "json:\"title\""; Description string "json:\"description\""; CoverImage struct { Large string "json:\"large\"" } "json:\"coverImage\""; Season string "json:\"season\""; SeasonYear int "json:\"seasonYear\""; Status string "json:\"status\""; Episodes int "json:\"episodes\""; NextAiringEpisode struct { AiringAt int "json:\"airingAt\""; TimeUntilAiring int "json:\"timeUntilAiring\""; Episode int "json:\"episode\"" } "json:\"nextAiringEpisode\""; Genres []string "json:\"genres\""; Tags []struct { Id int "json:\"id\""; Name string "json:\"name\""; Description string "json:\"description\""; Rank int "json:\"rank\""; IsMediaSpoiler bool "json:\"isMediaSpoiler\""; IsAdult bool "json:\"isAdult\"" } "json:\"tags\""; IsAdult bool "json:\"isAdult\"" }
 	    media: any;
 	    status: string;
 	    // Go type: struct { Year int "json:\"year\""; Month int "json:\"month\""; Day int "json:\"day\"" }

frontend/wailsjs/runtime/runtime.d.ts

@@ -134,7 +134,7 @@ export function WindowIsFullscreen(): Promise<boolean>;
 
 // [WindowSetSize](https://wails.io/docs/reference/runtime/window#windowsetsize)
 // Sets the width and height of the window.
-export function WindowSetSize(width: number, height: number): Promise<Size>;
+export function WindowSetSize(width: number, height: number): void;
 
 // [WindowGetSize](https://wails.io/docs/reference/runtime/window#windowgetsize)
 // Gets the width and height of the window.

go.mod

@@ -1,11 +1,11 @@
 module AniTrack
 
-go 1.23
+go 1.24.0
 
 require (
 	github.com/99designs/keyring v1.2.2
 	github.com/tidwall/gjson v1.18.0
-	github.com/wailsapp/wails/v2 v2.9.2
+	github.com/wailsapp/wails/v2 v2.10.1
 )
 
 require (
@@ -31,7 +31,7 @@ require (
 	github.com/pkg/browser v0.0.0-20240102092130-5ac0b6a4141c // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/rivo/uniseg v0.4.7 // indirect
-	github.com/samber/lo v1.47.0 // indirect
+	github.com/samber/lo v1.49.1 // indirect
 	github.com/tidwall/match v1.1.1 // indirect
 	github.com/tidwall/pretty v1.2.1 // indirect
 	github.com/tkrajina/go-reflector v0.5.8 // indirect
@@ -39,11 +39,11 @@ require (
 	github.com/valyala/fasttemplate v1.2.2 // indirect
 	github.com/wailsapp/go-webview2 v1.0.19 // indirect
 	github.com/wailsapp/mimetype v1.4.1 // indirect
-	golang.org/x/crypto v0.32.0 // indirect
+	golang.org/x/crypto v0.45.0 // indirect
-	golang.org/x/net v0.34.0 // indirect
+	golang.org/x/net v0.47.0 // indirect
-	golang.org/x/sys v0.29.0 // indirect
+	golang.org/x/sys v0.38.0 // indirect
-	golang.org/x/term v0.28.0 // indirect
+	golang.org/x/term v0.37.0 // indirect
-	golang.org/x/text v0.21.0 // indirect
+	golang.org/x/text v0.31.0 // indirect
 )
 
 // replace github.com/wailsapp/wails/v2 v2.9.1 => /home/nymusicman/go/pkg/mod

go.sum

@@ -23,8 +23,9 @@ github.com/gsterjov/go-libsecret v0.0.0-20161001094733-a6f4afe4910c/go.mod h1:NM
 github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e h1:Q3+PugElBCf4PFpxhErSzU3/PY5sFL5Z6rfv4AbGAck=
 github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
 github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
-github.com/kr/text v0.1.0 h1:45sCR5RtlFHMR4UwH9sdQ5TC8v0qDQCHnXt+kaKSTVE=
 github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
+github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
+github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
 github.com/labstack/echo/v4 v4.13.3 h1:pwhpCPrTl5qry5HRdM5FwdXnhXSLSY+WE+YQSeCaafY=
 github.com/labstack/echo/v4 v4.13.3/go.mod h1:o90YNEeQWjDozo584l7AwhJMHN0bOC4tAfg+Xox9q5g=
 github.com/labstack/gommon v0.4.2 h1:F8qTUNXgG1+6WQmqoUWnz8WiEU60mXVVw0P4ht1WRA0=
@@ -59,8 +60,8 @@ github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZN
 github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
 github.com/rivo/uniseg v0.4.7 h1:WUdvkW8uEhrYfLC4ZzdpI2ztxP1I582+49Oc5Mq64VQ=
 github.com/rivo/uniseg v0.4.7/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
-github.com/samber/lo v1.47.0 h1:z7RynLwP5nbyRscyvcD043DWYoOcYRv3mV8lBeqOCLc=
+github.com/samber/lo v1.49.1 h1:4BIFyVfuQSEpluc7Fua+j1NolZHiEHEpaSEKdsH0tew=
-github.com/samber/lo v1.47.0/go.mod h1:RmDH9Ct32Qy3gduHQuKJ3gW1fMHAnE/fAzQuf6He5cU=
+github.com/samber/lo v1.49.1/go.mod h1:dO6KHFzUKXgP8LDhU0oI8d2hekjXnGOu0DB8Jecxd6o=
 github.com/stretchr/objx v0.5.2 h1:xuMeJ0Sdp5ZMRXx/aWO6RZxdr3beISkG5/G/aIRr3pY=
 github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
 github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
@@ -82,26 +83,26 @@ github.com/wailsapp/go-webview2 v1.0.19 h1:7U3QcDj1PrBPaxJNCui2k1SkWml+Q5kvFUFyT
 github.com/wailsapp/go-webview2 v1.0.19/go.mod h1:qJmWAmAmaniuKGZPWwne+uor3AHMB5PFhqiK0Bbj8kc=
 github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
 github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
-github.com/wailsapp/wails/v2 v2.9.2 h1:Xb5YRTos1w5N7DTMyYegWaGukCP2fIaX9WF21kPPF2k=
+github.com/wailsapp/wails/v2 v2.10.1 h1:QWHvWMXII2nI/nXz77gpPG8P3ehl6zKe+u4su5BWIns=
-github.com/wailsapp/wails/v2 v2.9.2/go.mod h1:uehvlCwJSFcBq7rMCGfk4rxca67QQGsbg5Nm4m9UnBs=
+github.com/wailsapp/wails/v2 v2.10.1/go.mod h1:zrebnFV6MQf9kx8HI4iAv63vsR5v67oS7GTEZ7Pz1TY=
-golang.org/x/crypto v0.32.0 h1:euUpcYgM8WcP71gNpTqQCn6rC2t6ULUPiOzfWaXVVfc=
+golang.org/x/crypto v0.45.0 h1:jMBrvKuj23MTlT0bQEOBcAE0mjg8mK9RXFhRH6nyF3Q=
-golang.org/x/crypto v0.32.0/go.mod h1:ZnnJkOaASj8g0AjIduWNlq2NRxL0PlBrbKVyZ6V/Ugc=
+golang.org/x/crypto v0.45.0/go.mod h1:XTGrrkGJve7CYK7J8PEww4aY7gM3qMCElcJQ8n8JdX4=
 golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.34.0 h1:Mb7Mrk043xzHgnRM88suvJFwzVrRfHEHJEl5/71CKw0=
+golang.org/x/net v0.47.0 h1:Mx+4dIFzqraBXUugkia1OOvlD6LemFo1ALMHjrXDOhY=
-golang.org/x/net v0.34.0/go.mod h1:di0qlW3YNM5oh6GqDGQr92MyTozJPmybPK4Ev/Gm31k=
+golang.org/x/net v0.47.0/go.mod h1:/jNxtkgq5yWUGYkaZGqo27cfGZ1c5Nen03aYrrKpVRU=
 golang.org/x/sys v0.0.0-20200810151505-1b9f1253b3ed/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.29.0 h1:TPYlXGxvx1MGTn2GiZDhnjPA9wZzZeGKHHmKhHYvgaU=
+golang.org/x/sys v0.38.0 h1:3yZWxaJjBmCWXqhN1qh02AkOnCQ1poK6oF+a7xWL6Gc=
-golang.org/x/sys v0.29.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.38.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
-golang.org/x/term v0.28.0 h1:/Ts8HFuMR2E6IP/jlo7QVLZHggjKQbhu/7H0LJFr3Gg=
+golang.org/x/term v0.37.0 h1:8EGAD0qCmHYZg6J17DvsMy9/wJ7/D/4pV/wfnld5lTU=
-golang.org/x/term v0.28.0/go.mod h1:Sw/lC2IAUZ92udQNf3WodGtn4k/XoLyZoh8v/8uiwek=
+golang.org/x/term v0.37.0/go.mod h1:5pB4lxRNYYVZuTLmy8oR2BH8dflOR+IbTYFD8fi3254=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.21.0 h1:zyQAAkrwaneQ066sspRyJaG9VNi/YJ1NfzcGB3hZ/qo=
+golang.org/x/text v0.31.0 h1:aC8ghyu4JhP8VojJ2lEHBnochRno1sgL6nEi9WGFGMM=
-golang.org/x/text v0.21.0/go.mod h1:4IBbMaMmOPCJ8SecivzSH54+73PCFmPWxNTLm+vZkEQ=
+golang.org/x/text v0.31.0/go.mod h1:tKRAlv61yKIjGGHX/4tP1LTbc13YSec1pxVEWXzfoeM=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 gopkg.in/check.v1 v1.0.0-20200902074654-038fdea0a05b h1:QRR6H1YWRnHb4Y/HeNFCTJLFVxaq6wH4YuVdsUOr75U=
 gopkg.in/check.v1 v1.0.0-20200902074654-038fdea0a05b/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=

wails.json

@@ -12,6 +12,6 @@
   },
   "info": {
     "productName": "AniTrack",
-    "productVersion": "0.1.6"
+    "productVersion": "0.5.3"
   }
 }