From e3cde57f62bb01b40ad59e63eb19e89676008ade Mon Sep 17 00:00:00 2001
From: John O'Keefe <jokeefe@fastmail.com>
Date: Fri, 26 Jul 2024 16:50:42 -0400
Subject: [PATCH] made modal usable from header and body

---
 frontend/src/App.svelte | 46 ++++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index dd79459..7d47e5b 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
-    import {GetAniListSingleItemAndOpenModal, title, anilistModal} from "./GetAniListSingleItemAndOpenModal.svelte";
-    import {
-        AniListSearch,
-        GetAniListUserWatchingList
-    } from "../wailsjs/go/main/App";
-    import {type AniSearchList, MediaListSort} from "./anilist/types/AniListTypes";
+    import {anilistModal, GetAniListSingleItemAndOpenModal, title} from "./GetAniListSingleItemAndOpenModal.svelte";
+    import {GetAniListUserWatchingList} from "../wailsjs/go/main/App";
+    import {MediaListSort} from "./anilist/types/AniListTypes";
     import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
     import Header from "./Header.svelte";
     import {Modal} from "flowbite-svelte";
@@ -38,7 +35,7 @@
 
 </script>
 
-<Header />
+<Header/>
 
 <main>
 
@@ -54,29 +51,32 @@
 
             <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}
-                    <button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id)} 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">{
+                    <div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
+                        <button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id)} class="group">
+                            <img class="rounded-lg" src={media.media.coverImage.large} alt={
                             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}
-                    </button>
+                        }/>
+                            <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}
+                        </button>
+                    </div>
                 {/each}
             </div>
         </div>
     {/if}
     <Modal title={$title} bind:open={$anilistModal} {size} autoclose>
-        <ChangeDataDialogue />
+        <ChangeDataDialogue/>
     </Modal>
 </main>