added tailwind and cleaned up page

Cleaned up page to allow Tailwind to start handling the look and feel of
everything

frontend/package.json

@@ -12,11 +12,17 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tsconfig/svelte": "^3.0.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.7",
+    "tailwindcss": "^3.4.6",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",
     "vite": "^3.0.7"
+  },
+  "dependencies": {
+    "@tailwindcss/aspect-ratio": "^0.4.2"
   }
 }

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
-  import logo from './assets/images/logo-universal.png'
+    import {
-  import {Greet} from '../wailsjs/go/main/App.js'
+        AniListSearch,
-  import {AniListLogin, AniListSearch, GetAniListItem} from "../wailsjs/go/main/App";
+        GetAniListItem,
-  import type {AniListItem, AniSearchList} from "./AniListTypes";
+        GetAniListLoggedInUserId,
+        GetAniListUserWatchingList
+    } from "../wailsjs/go/main/App";
+    import {type AniListItem, type AniSearchList, MediaListSort} from "./anilist/types/AniListTypes";
+    import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
 
-  let resultText: string = "Please enter your name below 👇"
-  let name: string
     let aniId = "157371"
     let aniSearch = ""
     let aniListItem: AniListItem
     let aniListSearch: AniSearchList
     let aniListLoggedIn = false
-
+    let aniListWatchlist: AniListCurrentUserWatchList
-  function greet(): void {
+    let page = 1
-    Greet(name).then(result => resultText = result)
+    let perPage = 20
-  }
 
     function getAniListitem(): void {
         GetAniListItem(Number(aniId)).then(result => aniListItem = result)
@@ -24,44 +25,52 @@
         AniListSearch(aniSearch).then(result => aniListSearch = result)
     }
 
-  function loginToAniList(): void {
+    function anilistGetUserWatchlist(): void {
-    AniListLogin().then(() => aniListLoggedIn = true)
+        GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
+            aniListWatchlist = result
+            aniListLoggedIn = true
+        })
     }
 </script>
 
 <main>
-  <img alt="Wails logo" id="logo" src="{aniListItem === undefined ? logo : aniListItem.data.Media.coverImage.extraLarge}">
-<!--  <div class="result" id="result">{resultText}</div>-->
-<!--  <div class="input-box" id="input">-->
-<!--    <input autocomplete="off" bind:value={name} class="input" id="name" type="text"/>-->
-<!--    <button class="btn" on:click={greet}>Greet</button>-->
-<!--  </div>-->
-
-  <div class="result" id="AniTest">{aniListItem !== undefined ? aniListItem.data.Media.title.english : ""}</div>
-  <div class="input-box" id="aniButton">
-    <input autocomplete="off" bind:value={aniId} class="input" id="aniId" type="text"/>
-    <button class="btn" on:click={getAniListitem}>Get AniList Item</button>
-  </div>
-
-  <button class="btn" on:click={loginToAniList}>Login to AniList</button>
-  {#if aniListLoggedIn}
-    <div>You are logged in!</div>
-  {/if}
-
     <div class="input-box" id="aniSearch">
         <input autocomplete="off" bind:value={aniSearch} class="input" id="aniSearchInput" type="text"/>
         <button class="btn" on:click={runAniListSearch}>Search AniList</button>
     </div>
-  {#if aniListSearch !== undefined}
+
-    <ul>
+    <button class="btn" on:click={anilistGetUserWatchlist}>Login to AniList</button>
-        {#each aniListSearch.data.Page.media as media, index (media.id)}
+    {#if aniListLoggedIn}
-          <li>
+        <div>You are logged in {aniListWatchlist.data.Page.mediaList[0].user.name}!</div>
-            <div>{media.title.english !== null ? media.title.english : media.title.romaji}</div>
+    {/if}
-          </li>
+
-        {:else}
+    {#if aniListLoggedIn}
-          <div>No Results Yet...</div>
+        <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
+            <h1>Your Watching List</h1>
+
+            <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+                {#each aniListWatchlist.data.Page.mediaList as media}
+                    <a href="#" class="group">
+                        <!--                    <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">-->
+                        <div class="justify-center rounded-lg bg-gray-200">
+                            <img src={media.media.coverImage.large} alt="anime cover"/>
+                        </div>
+                        <h3 class="mt-4 text-sm text-white-700">{
+                            media.media.title.english === "" ?
+                                media.media.title.romaji :
+                                media.media.title.english
+                        }</h3>
+                        <p class="mt-1 text-lg font-medium text-white-900">{media.progress}
+                            / {media.media.nextAiringEpisode.episode !== 0 ?
+                                media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
+                        {#if media.media.episodes > 0}
+                            <p class="mt-1 text-lg font-medium text-white-900">Total
+                                Episodes: {media.media.episodes}</p>
+                        {/if}
+                    </a>
                 {/each}
-    </ul>
+            </div>
+        </div>
     {/if}
 </main>
 

frontend/src/style.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html {
     background-color: rgba(27, 38, 54, 1);
     text-align: center;

frontend/tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{svelte,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/aspect-ratio'),
+  ],
+}
+