chore(version): bump version to 0.5.2

Increment version number from 0.5.1 to 0.5.2 for the Logo click fix

.gitignore

@@ -30,3 +30,6 @@ package-lock.json
 .idea
 .env
 environment.go
+
+# REST (http files)
+http-client.private.env.json

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

@@ -8,7 +8,7 @@
         simklLoggedIn,
     } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
     import { push } from "svelte-spa-router";
-    import { Button } from "flowbite-svelte";
+    import WebsiteLink from "./WebsiteLink.svelte";
     import type { AniListGetSingleAnime } from "../anilist/types/AniListCurrentUserWatchListType";
     import Rating from "./Rating.svelte";
     import {
@@ -28,10 +28,7 @@
         StatusOptions,
     } from "../helperTypes/StatusTypes";
     import type { AniListUpdateVariables } from "../anilist/types/AniListTypes";
-    import {
+    import { convertDateToAniList } from "../helperFunctions/convertDateToAniList";
-        convertDateStringToAniList,
-        convertDateToAniList,
-    } from "../helperFunctions/convertDateToAniList";
     import {
         AniListDeleteEntry,
         AniListUpdateEntry,
@@ -45,6 +42,7 @@
     import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte";
     import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
     import Datepicker from "./Datepicker.svelte";
+    import { Badge, Tooltip } from "flowbite-svelte";
     const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
 
     let isAniListLoggedIn: boolean;
@@ -216,9 +214,8 @@
             };
             await AniListUpdateEntry(body).then(
                 (value: AniListGetSingleAnime) => {
-                    /* TODO in future when you inevitably add tags to typescript, until Anilist fixes the api bug
+                    value.data.MediaList.media.tags =
-                    where tags break the SaveMediaListEntry return, you'll want to use this delete line
+                        currentAniListAnime.data.MediaList.media.tags;
-                    delete value.data.MediaList.media.tags */
                     aniListAnime.update((newValue) => {
                         newValue = value;
                         return newValue;
@@ -479,12 +476,27 @@
                             type="button"
                             id="decrement-button"
                             data-input-counter-decrement="quantity-input"
-                            on:click={() =>
+                            on:click={() => {
-                                (currentAniListAnime.data.MediaList.progress -= 1)}
+                                currentAniListAnime.data.MediaList.progress -= 1;
-                            class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-s-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none"
+                                if (
+                                    currentAniListAnime.data.MediaList
+                                        .progress <
+                                    currentAniListAnime.data.MediaList.media
+                                        .episodes
+                                ) {
+                                    startingAnilistStatusOption =
+                                        statusOptions[0];
+                                    if (
+                                        currentAniListAnime.data.MediaList
+                                            .repeat === 0
+                                    )
+                                        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"
                         >
                             <svg
-                                class="w-3 h-3 text-gray-900 dark:text-white"
+                                class="w-3 h-3 text-white"
                                 aria-hidden="true"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
@@ -529,12 +541,33 @@
                             type="button"
                             id="increment-button"
                             data-input-counter-increment="quantity-input"
-                            on:click={() =>
+                            on:click={() => {
-                                (currentAniListAnime.data.MediaList.progress += 1)}
+                                currentAniListAnime.data.MediaList.progress += 1;
-                            class="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-11 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none"
+                                if (
+                                    currentAniListAnime.data.MediaList.media
+                                        .episodes ===
+                                    currentAniListAnime.data.MediaList.progress
+                                ) {
+                                    startingAnilistStatusOption =
+                                        statusOptions[2];
+                                    completedAtDate = new Date();
+                                }
+                                if (
+                                    currentAniListAnime.data.MediaList
+                                        .progress -
+                                        1 ===
+                                    0
+                                ) {
+                                    startingAnilistStatusOption =
+                                        statusOptions[0];
+                                    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"
                         >
                             <svg
-                                class="w-3 h-3 text-gray-900 dark:text-white"
+                                class="w-3 h-3 text-white"
                                 aria-hidden="true"
                                 xmlns="http://www.w3.org/2000/svg"
                                 fill="none"
@@ -564,11 +597,10 @@
                         </div>
                     {/if}
                 </div>
-
                 <div>
                     <label
                         for="status"
-                        class="text-left block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                        class="text-left block mb-2 text-sm font-medium text-white"
                         >Status</label
                     >
                     <select
@@ -663,63 +695,16 @@
             </div>
         </div>
     </div>
-    <div id="external-data">
+    <div class="flex mb-4 rounded-lg shadow max-w-4-4 bg-gray-800">
-        <div
-            id="anilist-data"
-            class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-16 lg:gap-x-36 group"
-        >
-            <h2 class="text-left mb-1 text-base font-semibold text-white">
-                AniList
-            </h2>
-        </div>
-    </div>
-
-    <AnimeTable />
-
-    <div class="flex rounded-lg shadow max-w-4-4 bg-gray-800">
-        <div
-            class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-start"
-        >
-            <Button
-                disabled={isSubmitting}
-                id="delete-button"
-                class="text-white bg-red-700 {$submitSuccess
-                    ? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800'
-                    : 'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-700 focus:ring-4 focus:ring-red-800 dark:focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
-                on:click={deleteEntries}
-            >
-                <svg
-                    id="submit-loader"
-                    aria-hidden="true"
-                    role="status"
-                    class="{isSubmitting
-                        ? 'inline'
-                        : 'hidden'} w-4 h-4 me-3 text-white animate-spin"
-                    viewBox="0 0 100 101"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                        fill="#E5E7EB"
-                    />
-                    <path
-                        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                        fill="currentColor"
-                    />
-                </svg>
-                Delete Entries
-            </Button>
-        </div>
         <div
             class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-end"
         >
-            <Button
+            <button
                 disabled={isSubmitting}
                 id="sync-button"
                 class="text-white {$submitSuccess
-                    ? 'bg-green-600 dark:bg-green-600 hover:bg-green-700 dark:hover:bg-green-700 focus:ring-4 focus:ring-green-800 dark:focus:ring-green-800'
+                    ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
-                    : 'bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 dark:focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+                    : 'bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
                 type="submit"
             >
                 <svg
@@ -743,23 +728,144 @@
                     />
                 </svg>
                 Sync Changes
-            </Button>
+            </button>
-            <Button
+            <button
                 class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
-                    focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white
+                    focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
-                    dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
+                    hover:border-gray-600"
                 on:click={async () => {
                     await CheckIfAniListLoggedInAndLoadWatchList();
                     return push("/");
                 }}
             >
                 Go Home
-            </Button>
+            </button>
+        </div>
+    </div>
+    <AnimeTable />
+
+    <div class="flex rounded-lg shadow max-w-4-4 bg-gray-800">
+        <div
+            class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-start"
+        >
+            <button
+                disabled={isSubmitting}
+                id="delete-button"
+                class="text-white {$submitSuccess
+                    ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
+                    : 'bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+                on:click={deleteEntries}
+            >
+                <svg
+                    id="submit-loader"
+                    aria-hidden="true"
+                    role="status"
+                    class="{isSubmitting
+                        ? 'inline'
+                        : 'hidden'} w-4 h-4 me-3 text-white animate-spin"
+                    viewBox="0 0 100 101"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                        fill="#E5E7EB"
+                    />
+                    <path
+                        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                        fill="currentColor"
+                    />
+                </svg>
+                Delete Entries
+            </button>
+        </div>
+        <div
+            class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-end"
+        >
+            <button
+                disabled={isSubmitting}
+                id="sync-button"
+                class="text-white {$submitSuccess
+                    ? 'bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-800'
+                    : 'bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-800'} font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none"
+                type="submit"
+            >
+                <svg
+                    id="submit-loader"
+                    aria-hidden="true"
+                    role="status"
+                    class="{isSubmitting
+                        ? 'inline'
+                        : 'hidden'} w-4 h-4 me-3 text-white animate-spin"
+                    viewBox="0 0 100 101"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                        fill="#E5E7EB"
+                    />
+                    <path
+                        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                        fill="currentColor"
+                    />
+                </svg>
+                Sync Changes
+            </button>
+            <button
+                class="text-white bg-gray-800 border border-gray-600 focus:outline-none hover:bg-gray-700 focus:ring-4
+                    focus:ring-gray-700 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2
+                    hover:border-gray-600"
+                on:click={async () => {
+                    await CheckIfAniListLoggedInAndLoadWatchList();
+                    return push("/");
+                }}
+            >
+                Go Home
+            </button>
         </div>
     </div>
 
-    <div>
+    <div class="flex m-5">
-        <h3 class="text-2xl">Summary</h3>
+        <div>
-        <p>{@html currentAniListAnime.data.MediaList.media.description}</p>
+            <h3 class="text-2xl">Genres</h3>
+            {#each currentAniListAnime.data.MediaList.media.genres as genre}
+                <div>
+                    <Badge large border color="blue" class="m-1 w-52">
+                        <div>
+                            <WebsiteLink
+                                id={genre}
+                                url="https://anilist.co/search/anime/{genre}"
+                            />
+                        </div>
+                    </Badge>
+                    <Tooltip>{genre}</Tooltip>
+                </div>
+            {/each}
+            <h3 class="text-2xl">Tags</h3>
+            <div class="mt-2">
+                {#each currentAniListAnime.data.MediaList.media.tags as tag}
+                    <div>
+                        <Badge large border color="blue" class="m-1 w-52">
+                            <div>
+                                <WebsiteLink
+                                    id={tag.name}
+                                    url="https://anilist.co/search/anime/?genres={tag.name}"
+                                />
+                                <span class="text-xs">({tag.rank}%)</span>
+                            </div>
+                        </Badge>
+                        <Tooltip>{tag.description}</Tooltip>
+                    </div>
+                {/each}
+            </div>
+        </div>
+
+        <div class="ml-5">
+            <h3 class="text-2xl">Summary</h3>
+            <p class="rounded border border-gray-700 p-2 mt-2">
+                {@html currentAniListAnime.data.MediaList.media.description}
+            </p>
+        </div>
     </div>
 </form>

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.2"
   }
 }