fix: improve click handling on touch screens

src/renderer/components/cards/FullCard.svelte

@@ -11,13 +11,12 @@
   }
 </script>
 
-<div class='d-flex px-20 py-10 position-relative' on:pointerenter={() => { preview = true }} on:pointerleave={() => { preview = false }}>
+<div class='d-flex px-20 py-10 position-relative' on:pointerenter={() => { preview = true }} on:pointerleave={() => { preview = false }} on:pointerdown={viewMedia}>
   {#if preview}
     <PreviewCard {media} />
   {/if}
   <div class='card m-0 p-0 overflow-hidden pointer'
-    style:--color={media.coverImage.color || '#1890ff'}
-    on:pointerdown={viewMedia}>
+    style:--color={media.coverImage.color || '#1890ff'}>
     <div class='row h-full'>
       <div class='col-4'>
         <img loading='lazy' src={media.coverImage.extraLarge || ''} alt='cover' class='cover-img w-full h-full' />

src/renderer/components/cards/PreviewCard.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { getContext } from 'svelte'
   import { formatMap, setStatus, playMedia } from '@/modules/anime.js'
   import { alRequest } from '@/modules/anilist.js'
   export let media
@@ -41,13 +40,9 @@
     })
     media.isFavourite = !media.isFavourite
   }
-  const view = getContext('view')
-  function viewMedia () {
-    $view = media
-  }
 </script>
 
-<div class='position-absolute w-350 h-400 absolute-container top-0 bottom-0 m-auto bg-dark-light z-30 rounded overflow-hidden pointer' on:pointerdown={viewMedia}>
+<div class='position-absolute w-350 h-400 absolute-container top-0 bottom-0 m-auto bg-dark-light z-30 rounded overflow-hidden pointer'>
   <div class='banner position-relative overflow-hidden bg-black'>
     <img src={media.bannerImage || ''} alt='banner' class='img-cover w-full h-full' />
     {#if media.trailer?.id}

src/renderer/components/cards/SmallCard.svelte

@@ -1,11 +1,17 @@
 <script>
+  import { getContext } from 'svelte'
   import PreviewCard from './PreviewCard.svelte'
   import { formatMap, statusColorMap } from '@/modules/anime.js'
   export let media
   let preview = false
+
+  const view = getContext('view')
+  function viewMedia () {
+    $view = media
+  }
 </script>
 
-<div class='d-flex p-20 position-relative first-check' on:pointerenter={() => { preview = true }} on:pointerleave={() => { preview = false }}>
+<div class='d-flex p-20 position-relative first-check' on:pointerenter={() => { preview = true }} on:pointerleave={() => { preview = false }} on:pointerdown={viewMedia}>
   {#if preview}
     <PreviewCard {media} />
   {/if}
@@ -31,7 +37,7 @@
 </div>
 
 <style>
-  .first-check:first-child :global(.absolute-container ){
+  .first-check:first-child :global(.absolute-container) {
     left: -48% !important
   }
   .title {

src/renderer/views/Search.svelte

@@ -0,0 +1,13 @@
+<script context='module'>
+  import { writable } from 'simple-store-svelte'
+
+  export const search = writable(null)
+</script>
+
+<script>
+  import Search from '../components/Search.svelte'
+</script>
+
+{#if $search}
+  <Search />
+{/if}