add banner as image to art list

src/lib/components/artList.svelte

@@ -1,9 +1,16 @@
-<script>
+<script lang="ts">
     import request, { imageproxy } from "$lib/util/request";
 
-    export var mangaId;
+    export var mangaId: string;
+    export var additionalList: {
+        alt: string;
+        src: string;
+        width?: number;
+        height?: number;
+        color?: string;
+    }[] = [];
 
-    let list;
+    let list: any;
     $: list = request("cover?manga[]=" + mangaId + "&locales[]=en&locales[]=uk&locales[]=ja");
 
     export var selectedImage = null;
@@ -17,6 +24,9 @@
             <img on:click={() => selectedImage = `${imageproxy}https://uploads.mangadex.org/covers/${mangaId}/${item.attributes.fileName}.512.jpg`} width=512 height=805 src="{imageproxy}https://uploads.mangadex.org/covers/{mangaId}/{item.attributes.fileName}.512.jpg" alt="" draggable={false}>
         {/each}
     {/await}
+    {#each additionalList as item}
+        <img on:click={() => selectedImage = item.src} style="{item.color ? "--box-shadow-color: " + item.color : ""};" width={item.width} height={item.height} src="{item.src}" alt="{item.alt}" draggable={false}>
+    {/each}
 </div>
     
 <style>
@@ -32,10 +42,16 @@
         border-radius: 5px;
         height: 10rem;
         width: auto;
+        --box-shadow-color: white;
+        box-shadow: 0 0 0 0 var(--box-shadow-color);
+        transition: box-shadow 0.2s ease-in-out;
     }
     div img:first-child {
         grid-column: 1 / span 2;
         grid-row: 1 / span 2;
         height: 20rem;
     }
+    div img:hover, div img:active, div img:focus {
+        box-shadow: 0 0 0.5rem var(--box-shadow-color);
+    }
 </style>

src/routes/[manga]/+page.svelte

@@ -293,6 +293,19 @@
     $: smallScreenMode = width < 700;
 
     var scrollY, innerHeight;
+
+    let additionalImages = [];
+
+    $: if(anilistData) anilistData.then(data => {
+        if(data.bannerImage && !additionalImages.find(t => t.src === data.bannerImage)) {
+            additionalImages.push({
+                src: data.bannerImage,
+                alt: "Banner image",
+                color: data.coverImage.color
+            });
+            additionalImages = additionalImages;
+        }
+    });
 </script>
 
 <svelte:window on:beforeUnload={beforeUnload} bind:innerWidth={width} bind:scrollY bind:innerHeight />
@@ -442,7 +455,7 @@
         </SwiperSlide>
         <SwiperSlide>
             <div style="min-height: 30rem;">
-                <ArtList {mangaId} bind:selectedImage />
+                <ArtList {mangaId} bind:selectedImage additionalList={additionalImages} />
             </div>
         </SwiperSlide>
         <SwiperSlide>
@@ -528,8 +541,9 @@
     .hidden {
         display: none;
     }
-    .infoflex {
+    .infoflex.flex {
         margin: 15px;
+        justify-content: start;
     }
     .flex-wrapped {
         display: flex;
@@ -555,8 +569,10 @@
     }
     .banner {
         width: 100%;
-        max-height: 100%;
+        max-height: 40vh;
         object-fit: cover;
+        object-position: center top;
+        overflow: hidden;
     }
     .banner-container .fader {
         position: absolute;
@@ -565,7 +581,7 @@
         width: 100%;
         height: 100%;
         z-index: 1;
-        background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
+        background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,1) 100%);
     }
     .genre {
         border-radius: 5px;