replace root page search with quick search popup

Author: ajgeiss0702

src/routes/(info)/lttstore/+layout.svelte

@@ -7,6 +7,7 @@
   import ProductSearchModal from "./ProductSearchModal.svelte";
   import {popup} from "$lib/replacements/popup.ts";
   import type { MouseEventHandler } from "svelte/elements";
+  import { setContext } from "svelte";
 
   let { data, children } = $props();
 
@@ -24,6 +25,8 @@
 
   let searchOpen = $state(false);
 
+  setContext("lttstore-search-modal", () => searchOpen = true)
+
   function keypress(event: KeyboardEvent) {
     if(event.key === "P" && document.activeElement?.tagName !== "INPUT") {
       searchOpen = true;

src/routes/(info)/lttstore/+page.svelte

@@ -3,7 +3,7 @@
 
   import LTTProductCard from "$lib/lttstore/LTTProductCard.svelte";
   import { page } from "$app/state";
-  import { onMount } from "svelte";
+  import { getContext, onMount } from "svelte";
   import {flip} from "svelte/animate";
   import {slide, fade} from "svelte/transition";
   import { Progress } from "@skeletonlabs/skeleton-svelte";
@@ -17,58 +17,7 @@
 
   let { data } = $props();
 
-  const searchClient = new SearchClient({
-    'nodes': [{
-      'host': 'search.ajg0702.us',
-      'port': 443,
-      'protocol': 'https'
-    }],
-    // this api key only has access to search, don't worry
-    'apiKey': "swyHTJhzz7MQIxDjBqE2dpOCM6DIU10P",
-    'connectionTimeoutSeconds': 10
-  });
-
   let waiting = $state(false);
-  let searchPromise: Promise<SearchResponse<ProductSearchIndex> | undefined> | undefined = $state();
-  let searchResults: SearchResponse<ProductSearchIndex> | undefined = $state();
-  let networkError = $state(false);
-
-  let searchText = $state("");
-
-  const resultsPerPage = 100;
-
-  function search(text: string, page?: number) {
-    if(!text) {
-      searchPromise = undefined;
-      searchResults = undefined;
-      return;
-    }
-    searchPromise = searchClient.collections<ProductSearchIndex>("lttstore_products").documents()
-      .search({
-        q: text,
-        query_by: "title,handle,description",
-        query_by_weights: "4,2,0",
-        text_match_type: "max_weight",
-        page: page ?? 1,
-        per_page: resultsPerPage
-      }, {cacheSearchResultsForSeconds: 60})
-      .then(r => {
-        if(r.request_params.q === searchText) {
-          searchResults = r as SearchResponse<ProductSearchIndex>
-        }
-        return r as SearchResponse<ProductSearchIndex>;
-      })
-      .then(r => {
-        networkError = false;
-        return r;
-      })
-      .catch(e => {
-        console.error("Error while searching:", e);
-        searchResults = undefined;
-        networkError = true;
-        return undefined;
-      })
-  }
 
   let loading = $state(false);
   async function reload() {
@@ -81,16 +30,8 @@
   onMount(() => {
     setTimeout(() => mounted = true, 0)
   });
-  run(() => {
-    let tmpText = searchText+"";
-    waiting = true;
-    setTimeout(() => {
-      if(searchText === tmpText) {
-        waiting = false;
-        search(searchText);
-      }
-    }, 100)
-  });
+
+  const openSearch = getContext<() => void>("lttstore-search-modal");
 </script>
 <svelte:head>
   <title>LTTStore Watcher - Whenplane</title>
@@ -121,68 +62,11 @@
   <br>
   <br>
 
-  <input placeholder="Search for products" bind:value={searchText} class="input w-64 p-2 pl-4">
-  <div class="inline-block w-12">
-    {#await searchPromise}
-      {#if !waiting}
-        <Progress class="inline-block" width="w-6" stroke={250}/>
-      {/if}
-    {/await}
-    {#if waiting}
-      <Progress class="inline-block" width="w-6" stroke={250}/>
-    {/if}
-  </div>
+  <button class="input w-64 p-1 mx-2 pl-4 text-left inline-block bg-surface-900 text-white/40" onclick={() => openSearch()}>
+    Search for products
+  </button>
   <a href="/lttstore/advanced-search">Advanced Search</a>
   <br>
-  {#if searchResults && searchResults.hits}
-    {#each searchResults.hits as result (result.document.id)}
-      {@const productData = JSON.parse(result.document.product)}
-      {@const descriptionSnippet = result.highlight?.description?.snippet?.replaceAll("</p>", "\n")}
-      {@const openingIndex = descriptionSnippet?.indexOf("<")}
-      {@const closingIndex = descriptionSnippet?.indexOf(">")}
-      <a class="block card p-2 m-1 truncate" href="/lttstore/products/{result.document.handle}" animate:flip={{ duration: 50 }} transition:slide>
-        <img src={productData.featured_image ?? productData.images[0]} class="inline-block h-8 w-8 rounded-md">
-        <span class="result-highlight" class:line-through={!(result.document.available ?? true)}>
-          {@html sanitizeHtml(result.highlight?.title?.snippet ?? result.document.title, {allowedTags: ["mark"]})}
-        </span>
-         
-        <span class="opacity-70 max-w-full truncate result-highlight">
-          <!--{descriptionSnippet}-->
-          {@html
-            sanitizeHtml(
-              descriptionSnippet
-                  ?.substring( // we trim this so that if typesense starts the snippet in the middle of a html tag, we can remove that
-                    closingIndex && openingIndex &&
-                    closingIndex >= 0 &&
-                    (
-                      openingIndex >= 0 ? openingIndex > closingIndex : true
-                    )
-                      ?
-                      closingIndex+1 :
-                      0
-                  ) ??
-                productData.description,
-              {allowedTags: ["mark"]}
-            )}
-        </span>
-        <br>
-      </a>
-    {:else}
-      No results found.
-    {/each}
-    {#if searchResults.hits.length === resultsPerPage}
-      {searchResults.found - resultsPerPage} more results hidden. Please narrow your search query.<br>
-    {/if}
-  {/if}
-  {#if networkError}
-      <span class="text-error-500">
-        <br>
-        A network error occurred while trying to get the results for your search.<br>
-        Check your internet connection.<br>
-        If your network connection is fine, the search server might be down.
-        Try again in a few minutes, and <a href="/support">contact me</a> if it is still down.
-      </span>
-  {/if}
   <br>
 
 

src/routes/(info)/lttstore/ProductSearchModal.svelte

@@ -11,6 +11,7 @@
   import CircleProgress from "$lib/replacements/CircleProgress.svelte";
   import type { MouseEventHandler } from "svelte/elements";
   import { sha256 } from "$lib/utils.ts";
+  import { onMount } from "svelte";
 
   const searchClient = new SearchClient({
     'nodes': [{
@@ -87,10 +88,22 @@
   $effect(() => {
     search(searchText);
   });
+
+  let input = $state<HTMLInputElement>();
+  onMount(() => {
+    input?.focus()
+  })
 </script>
 
 <div class="s-container p-4 absolute">
-  <input class="input block px-2 pl-4 py-0.5 bg-surface-800/85 rounded-2xl border border-surface-500" autofocus placeholder="Find a product" bind:value={searchText} onkeydown={keyPress}>
+  <input
+    class="input block px-2 pl-4 py-0.5 bg-surface-800/85 rounded-2xl border border-surface-500"
+    autofocus
+    placeholder="Find a product"
+    bind:value={searchText}
+    onkeydown={keyPress}
+    bind:this={input}
+  >
   <div class="inline-block absolute top-4 right-8">
     {#if waiting}
       <CircleProgress class="inline-block" width="w-6"/>