From 5053dc18b3221566117e54b51697fa58b2dd764f Mon Sep 17 00:00:00 2001
From: David Ho <davidho0403@gmail.com>
Date: Sat, 27 Jan 2024 19:03:58 +0800
Subject: [PATCH 1/2] feat: add search url parameter

---
 package.json                             |  1 +
 pnpm-lock.yaml                           | 13 +++++++++++++
 src/routes/+page.svelte                  | 13 +++++++++++--
 src/routes/directory/[slug]/+page.svelte | 11 ++++++++++-
 4 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 81b9d88..0c88e7c 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "prettier-plugin-tailwindcss": "0.5.11",
     "svelte": "4.2.9",
     "svelte-check": "3.6.3",
+    "sveltekit-search-params": "^2.1.0",
     "tailwindcss": "3.4.1",
     "tslib": "2.6.2",
     "typescript": "5.3.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ec751c6..dfdf80f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -103,6 +103,9 @@ devDependencies:
   svelte-check:
     specifier: 3.6.3
     version: 3.6.3(postcss@8.4.33)(svelte@4.2.9)
+  sveltekit-search-params:
+    specifier: ^2.1.0
+    version: 2.1.0(@sveltejs/kit@2.4.3)(svelte@4.2.9)
   tailwindcss:
     specifier: 3.4.1
     version: 3.4.1
@@ -2892,6 +2895,16 @@ packages:
       magic-string: 0.30.5
       periscopic: 3.1.0
 
+  /sveltekit-search-params@2.1.0(@sveltejs/kit@2.4.3)(svelte@4.2.9):
+    resolution: {integrity: sha512-qP+epzWVm0gnfFRx4OYq4Ps77WrQ5D81je/nybXbNAj9qyiQhpvxqyqDAYVr8/fOpvF7OJnUS2LmcW3+Ujdc/Q==}
+    peerDependencies:
+      '@sveltejs/kit': ^1.0.0 || ^2.0.0
+      svelte: ^3.55.0 || ^4.0.0 || ^5.0.0
+    dependencies:
+      '@sveltejs/kit': 2.4.3(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.9)(vite@5.0.12)
+      svelte: 4.2.9
+    dev: true
+
   /tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
     dev: false
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f6b541a..690269d 100644
--- a/src/routes/+page.svelte
+++ b/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>
diff --git a/src/routes/directory/[slug]/+page.svelte b/src/routes/directory/[slug]/+page.svelte
index d16da26..74feba0 100644
--- a/src/routes/directory/[slug]/+page.svelte
+++ b/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>

From cd748a86579850a1e8fecaf5e4c1a5b27d16c039 Mon Sep 17 00:00:00 2001
From: David Ho <davidho0403@gmail.com>
Date: Sat, 27 Jan 2024 20:35:03 +0800
Subject: [PATCH 2/2] chore: remove url param if the input was cleared

---
 src/routes/+page.svelte                  | 2 +-
 src/routes/directory/[slug]/+page.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 690269d..2ab7a0b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -47,7 +47,7 @@
 
   // Search svgs:
   const searchSvgs = () => {
-    $searchParam = searchTerm;
+    $searchParam = searchTerm || null;
     loadSvgs();
     filteredSvgs = allSvgs.filter((svg: iSVG) => {
       let svgTitle = svg.title.toLowerCase();
diff --git a/src/routes/directory/[slug]/+page.svelte b/src/routes/directory/[slug]/+page.svelte
index 74feba0..5867154 100644
--- a/src/routes/directory/[slug]/+page.svelte
+++ b/src/routes/directory/[slug]/+page.svelte
@@ -28,7 +28,7 @@
   }
 
   const searchSvgs = () => {
-    $searchParam = searchTerm;
+    $searchParam = searchTerm || null;
     return (filteredSvgs = svgsByCategory.filter((svg: iSVG) => {
       let svgTitle = svg.title.toLowerCase();
       return svgTitle.includes(searchTerm.toLowerCase());