fix: Set display theme on cover swiper slide click

src/svelte-interface/components/store/CoverSwiper.svelte

@@ -4,7 +4,7 @@
   import type { Theme } from '@/svelte-interface/types/Theme';
   import { register, type SwiperContainer } from 'swiper/element/bundle';
 
-  let { coverThemes } = $props<{ coverThemes: Theme[] }>();
+  let { coverThemes, setDisplayTheme } = $props<{ coverThemes: Theme[], setDisplayTheme: (theme: Theme) => void  }>();
   let swiperEl = $state<SwiperContainer | undefined>();
   
 
@@ -20,7 +20,13 @@
   <div class="relative w-full transition-opacity rounded-xl overflow-clip" transition:fade>
     <swiper-container bind:this={swiperEl} slides-per-view="1" space-between="20" loop="true" autoplay="true" disable-on-interaction="false" pause-on-mouse-enter="true" class="w-full aspect-[8/3]">
       {#each coverThemes as theme, index (index)}
-        <swiper-slide class="relative cursor-pointer rounded-xl overflow-clip">
+        <swiper-slide
+          onkeydown={(e: any) => { if (e.key === 'Enter') setDisplayTheme(theme) }}
+          onclick={() => setDisplayTheme(theme)}
+          role="button"
+          tabindex="0"
+          class="relative cursor-pointer rounded-xl overflow-clip"
+        >
           <img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-full" />
           <div class='absolute bottom-0 left-0 p-8 z-[1]'>
             <h2 class='text-4xl font-bold text-white'>{theme.name}</h2>

src/svelte-interface/components/store/ThemeGrid.svelte

@@ -1,47 +1,40 @@
 <script lang="ts">
   import type { Theme } from '@/svelte-interface/types/Theme'
   import ThemeCard from './ThemeCard.svelte';
-  import ThemeModal from './ThemeModal.svelte';
-  import { StoreDownloadTheme } from '@/seqta/ui/themes/downloadTheme'
-  import { setTheme } from '@/seqta/ui/themes/setTheme';
-
-  let { themes, searchTerm } = $props<{ themes: Theme[]; searchTerm: string }>();
-  let displayTheme = $state<Theme | null>();
 
+  let { themes, searchTerm, setDisplayTheme } = $props<{ themes: Theme[]; searchTerm: string, setDisplayTheme: (theme: Theme) => void }>();
+  
   let filteredThemes = $derived(themes.filter((theme: Theme) =>
     theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || theme.description.toLowerCase().includes(searchTerm.toLowerCase())
   ));
 </script>
 
-<div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
-  {#each filteredThemes as theme (theme.id)}
-    <ThemeCard theme={theme} onClick={() => displayTheme = theme} />
-  {/each}
-
-  <!-- "Got a Theme Idea?" card -->
-  <a href="https://betterseqta.gitbook.io/betterseqta-docs" class='w-full cursor-pointer'>
-    <div class="bg-zinc-50 h-48 w-full transition-all hover:scale-105 duration-500 relative justify-center items-center group group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] rounded-xl overflow-clip border">
-      <div class="text-2xl font-IconFamily">{'\uecb3'}</div>
-      <div class="text-xl font-bold text-center transition-all duration-500 dark:text-white">
-        Got a Theme Idea?
-        <p class="text-lg font-light subtitle">Transform it into a stunning theme!</p>
-      </div>
-    </div>
-  </a>
-
+<div class="relative" >
+  <div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
+    {#each filteredThemes as theme (theme.id)}
+      <ThemeCard theme={theme} onClick={() => setDisplayTheme(theme)} />
+    {/each}
+  
+    {#if filteredThemes.length !== 0}
+      <a href="https://betterseqta.gitbook.io/betterseqta-docs" class='w-full cursor-pointer'>
+        <div class="bg-zinc-50 h-48 w-full transition-all hover:scale-105 duration-500 relative justify-center items-center group group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] rounded-xl overflow-clip border">
+          <div class="text-2xl font-IconFamily">{'\uecb3'}</div>
+          <div class="text-xl font-bold text-center transition-all duration-500 dark:text-white">
+            Got a Theme Idea?
+            <p class="text-lg font-light subtitle">Transform it into a stunning theme!</p>
+          </div>
+        </div>
+      </a>
+    {/if}
+  
+  </div>
   {#if filteredThemes.length === 0}
-    <div class="flex flex-col items-center justify-center w-full text-center h-96">
+    <div class="absolute top-0 flex flex-col items-center justify-center w-full text-center h-96">
       <h1 class="mt-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl">That doesn't exist! 😭😭😭</h1>
       <p class="mt-6 text-lg leading-7 text-zinc-600 dark:text-zinc-300">Sorry, we couldn't find the theme you're looking for. Maybe... you could create it?</p>
+      <a href="https://betterseqta.gitbook.io/betterseqta-docs" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
+        Show me how!
+      </a>
     </div>
   {/if}
-</div>
-
-{#if displayTheme}
-  <ThemeModal theme={displayTheme} onClose={() => displayTheme = null} onInstall={() => {
-    StoreDownloadTheme({themeContent: displayTheme as Theme}).then(() => {
-      setTheme((displayTheme as Theme).id);
-      displayTheme = null;
-    });
-  }} onRemove={() => {}} />
-{/if}
+</div>