feat: add search url parameter

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { iSVG } from '@/types/svg';
   import { cn } from '@/utils/cn';
+  import { queryParam } from 'sveltekit-search-params';
 
   // Get all svgs:
   import { svgsData } from '@/data';
@@ -13,6 +14,9 @@
   import Grid from '@/components/grid.svelte';
   import NotFound from '@/components/notFound.svelte';
 
+  // URL params
+  const searchParam = queryParam('search');
+
   // Icons:
   import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon } from 'lucide-svelte';
   import { buttonStyles } from '@/ui/styles';
@@ -22,7 +26,7 @@
   let showAll: boolean = false;
 
   // Search:
-  let searchTerm = '';
+  let searchTerm = $searchParam || '';
   let filteredSvgs: iSVG[] = [];
 
   // Order by last added:
@@ -43,6 +47,7 @@
 
   // Search svgs:
   const searchSvgs = () => {
+    $searchParam = searchTerm;
     loadSvgs();
     filteredSvgs = allSvgs.filter((svg: iSVG) => {
       let svgTitle = svg.title.toLowerCase();
@@ -80,7 +85,11 @@
     });
   };
 
-  loadSvgs();
+  if ($searchParam) {
+    searchSvgs();
+  } else {
+    loadSvgs();
+  }
 </script>
 
 <svelte:head>

src/routes/directory/[slug]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { PageData } from './$types';
   import type { iSVG } from '@/types/svg';
+  import { queryParam } from 'sveltekit-search-params';
 
   export let data: PageData;
   let svgsByCategory = data.svgs || [];
@@ -13,8 +14,11 @@
   import SvgCard from '@/components/svgCard.svelte';
   import NotFound from '@/components/notFound.svelte';
 
+  // URL params
+  const searchParam = queryParam('search');
+
   // Search:
-  let searchTerm = '';
+  let searchTerm = $searchParam || '';
   let filteredSvgs: iSVG[] = [];
 
   if (searchTerm.length === 0) {
@@ -24,6 +28,7 @@
   }
 
   const searchSvgs = () => {
+    $searchParam = searchTerm;
     return (filteredSvgs = svgsByCategory.filter((svg: iSVG) => {
       let svgTitle = svg.title.toLowerCase();
       return svgTitle.includes(searchTerm.toLowerCase());
@@ -34,6 +39,10 @@
     searchTerm = '';
     searchSvgs();
   };
+
+  if ($searchParam) {
+    searchSvgs();
+  }
 </script>
 
 <svelte:head>