fix: Set display theme on cover swiper slide click

src/old-interface/hooks/ThemeManagment.ts

@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill'
-import { CustomTheme, DownloadedTheme, ThemeList } from '../../types/CustomThemes';
+import type { CustomTheme, DownloadedTheme, ThemeList } from '../../types/CustomThemes';
 import localforage from 'localforage';
 
 export const setTheme = async (themeID: string) => {

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,24 +1,21 @@
 <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">
+<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={() => displayTheme = theme} />
+      <ThemeCard theme={theme} onClick={() => setDisplayTheme(theme)} />
     {/each}
   
-  <!-- "Got a Theme Idea?" card -->
+    {#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>
@@ -28,20 +25,16 @@
           </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}

src/svelte-interface/pages/store.svelte

@@ -8,6 +8,9 @@
   import { settingsState } from '@/seqta/utils/listeners/SettingsState'
   import type { Theme } from '../types/Theme'
   import browser from 'webextension-polyfill'
+  import ThemeModal from '../components/store/ThemeModal.svelte'
+  import { StoreDownloadTheme } from '@/seqta/ui/themes/downloadTheme'
+  import { setTheme } from '@/seqta/ui/themes/setTheme'
 
   // State variables
   let searchTerm = $state<string>('');
@@ -15,6 +18,11 @@
   let coverThemes = $state<Theme[]>([]);
   let loading = $state<boolean>(true);
   let darkMode = $state<boolean>(false);
+  let displayTheme = $state<Theme | null>(null);
+
+  const setDisplayTheme = (theme: Theme) => {
+    displayTheme = theme;
+  };
 
   // Fetch themes and initialize app
   const fetchThemes = async () => {
@@ -50,8 +58,8 @@
   ));
 </script>
 
-<div class="w-screen h-screen overflow-y-scroll bg-white {darkMode ? 'dark' : ''}">
-  <div class="bg-zinc-200/50 dark:bg-zinc-900 dark:text-white pt-[4.25rem] h-full px-12">
+<div class="w-screen h-screen bg-white {darkMode ? 'dark' : ''}">
+  <div class="bg-zinc-200/50 dark:bg-zinc-900 dark:text-white pt-[4.25rem] h-full px-12 overflow-y-scroll">
 
     <!-- Search Input (optional) -->
     <div class="px-8 py-4">
@@ -71,17 +79,19 @@
     {:else}
 
       {#if searchTerm === ''}
-        <CoverSwiper coverThemes={coverThemes} />
+        <CoverSwiper coverThemes={coverThemes} setDisplayTheme={setDisplayTheme} />
       {/if}
 
       <!-- ThemeGrid to display filtered themes -->
-      <ThemeGrid themes={filteredThemes} searchTerm={searchTerm} />
+      <ThemeGrid themes={filteredThemes} searchTerm={searchTerm} setDisplayTheme={setDisplayTheme} />
 
-      {#if filteredThemes.length === 0 && !loading}
-        <div class="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">No results! 😭</h1>
-          <p class="mt-6 text-lg leading-7 text-zinc-600 dark:text-zinc-300">Sorry, no themes match your search. Maybe create one?</p>
-        </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}
         
     {/if}