From 0b9240a390164d9c47e45621597eb9d40afffb33 Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Sun, 15 Sep 2024 08:50:31 +1000
Subject: [PATCH] feat: Add header component to store page for search
 functionality

---
 .../components/store/Header.svelte            | 45 +++++++++++++++++++
 src/svelte-interface/pages/store.svelte       | 16 +++----
 2 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 src/svelte-interface/components/store/Header.svelte

diff --git a/src/svelte-interface/components/store/Header.svelte b/src/svelte-interface/components/store/Header.svelte
new file mode 100644
index 00000000..d1993244
--- /dev/null
+++ b/src/svelte-interface/components/store/Header.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import logo from '@/resources/icons/betterseqta-dark-full.png';
+  import logoDark from '@/resources/icons/betterseqta-light-full.png';
+  import browser from 'webextension-polyfill';
+
+  // Props
+  let { searchTerm, setSearchTerm, darkMode } = $props<{ searchTerm: string, setSearchTerm: (term: string) => void, darkMode: boolean }>();
+
+  // Clear search input function
+  const clearSearch = () => {
+    setSearchTerm('');
+  };
+</script>
+
+<header class="fixed top-0 z-50 w-full h-[4.25rem] bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-800/90 backdrop-blur-xl dark:text-white">
+  <div class="flex items-center justify-between px-4 py-1">
+    <div class="flex gap-4 cursor-pointer place-items-center" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0">
+      <img src={browser.runtime.getURL(logo)} class="h-14 {darkMode ? 'hidden' : ''}" alt="Logo" />
+      <img src={browser.runtime.getURL(logoDark)} class="h-14 {darkMode ? '' : 'hidden'}" alt="Dark Logo" />
+
+      <div class="w-[1px] h-10 my-auto bg-zinc-400 dark:bg-zinc-600"></div>
+
+      <h1 class="text-xl font-semibold">Theme Store</h1>
+    </div>
+
+    <div class="relative flex gap-2">
+      <input
+        type="text"
+        placeholder="Search themes..."
+        value={searchTerm}
+        oninput={(e: any) => setSearchTerm(e.target.value)}
+        class="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-none focus:border-transparent" />
+      <svg
+        class="absolute w-5 h-5 text-gray-400 transform -translate-y-1/2 left-3 top-1/2 dark:text-gray-200"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        viewBox="0 0 24 24"
+        stroke="currentColor">
+        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+      </svg>
+    </div>
+  </div>
+</header>
\ No newline at end of file
diff --git a/src/svelte-interface/pages/store.svelte b/src/svelte-interface/pages/store.svelte
index f682cc40..9ce5065e 100644
--- a/src/svelte-interface/pages/store.svelte
+++ b/src/svelte-interface/pages/store.svelte
@@ -11,6 +11,7 @@
   import ThemeModal from '../components/store/ThemeModal.svelte'
   import { StoreDownloadTheme } from '@/seqta/ui/themes/downloadTheme'
   import { setTheme } from '@/seqta/ui/themes/setTheme'
+  import Header from '../components/store/Header.svelte'
 
   // State variables
   let searchTerm = $state<string>('');
@@ -23,6 +24,10 @@
   const setDisplayTheme = (theme: Theme) => {
     displayTheme = theme;
   };
+  
+  const setSearchTerm = (term: string) => {
+    searchTerm = term;
+  };
 
   // Fetch themes and initialize app
   const fetchThemes = async () => {
@@ -59,17 +64,10 @@
 </script>
 
 <div class="w-screen h-screen bg-white {darkMode ? 'dark' : ''}">
+  <Header searchTerm={searchTerm} setSearchTerm={setSearchTerm} darkMode={darkMode} />
+  
   <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">
-      <input
-        type="text"
-        placeholder="Search Themes"
-        bind:value={searchTerm}
-        class="w-full p-2 bg-white border rounded-lg dark:bg-zinc-800 border-zinc-300 dark:border-zinc-600 text-zinc-800 dark:text-white"
-      />
-    </div>
 
     <!-- Loading State -->
     {#if loading}