From 66621c21dfb395e586d9ac0eab201f9ef7760d6d Mon Sep 17 00:00:00 2001
From: Xinrui Chen <xynree@gmail.com>
Date: Tue, 19 Jul 2022 12:27:39 -0700
Subject: [PATCH 1/9] style: header now set to sticky

---
 src/lib/Layout/Header.svelte   | 2 +-
 src/lib/Layout/Products.svelte | 2 +-
 src/routes/__layout.svelte     | 9 ++++++---
 src/routes/index.svelte        | 2 +-
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/lib/Layout/Header.svelte b/src/lib/Layout/Header.svelte
index 53d05b2..b80de92 100644
--- a/src/lib/Layout/Header.svelte
+++ b/src/lib/Layout/Header.svelte
@@ -1,7 +1,7 @@
 <script>
 	export let reset;
 	const { title } = {
-		title: 'hover:bg-blue-300 text-lg font-bold m-12 ml-0 pl-12'
+		title: 'hover:bg-blue-300 text-lg font-bold p-12 pl-12 pt-11 snap-start sticky top-0 bg-white h-28 shadow-sm shadow-white'
 	};
 </script>
 
diff --git a/src/lib/Layout/Products.svelte b/src/lib/Layout/Products.svelte
index bf63cf8..7159a55 100644
--- a/src/lib/Layout/Products.svelte
+++ b/src/lib/Layout/Products.svelte
@@ -6,7 +6,7 @@
 	const { container, productStyle } = {
 		container: 'pt-4',
 		productList: 'flex flex-col items-start mt-10 text-sm',
-		productStyle: 'w-full text-left'
+		productStyle: 'w-full text-left snap-start snap-always'
 	};
 </script>
 
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 6c5a4ab..99b1fda 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -16,15 +16,17 @@
 		filters = { selectedCat: 0, selectedRating: 0 };
 	};
 
-	const { main, sidebar } = {
+	const { main, container, sidebar } = {
 		main: 'flex w-screen h-screen sfmono',
-		sidebar: 'flex flex-col justify-start h-screen overflow-auto w-52 shrink-0'
+		container: 'flex flex-col h-screen justify-start shrink-0 overflow-auto w-56',
+		sidebar: 'pt-1 flex flex-col shrink-0'
 	};
 </script>
 
 <main class={main}>
-	<div class={sidebar}>
+	<div class={container}>
 		<Header {reset} />
+		<div class={sidebar}>
 		{#if !Object.keys($currentProduct).length}
 			<Search />
 			<Filters bind:filters {reset} />
@@ -32,6 +34,7 @@
 		{:else}
 			<Products productsView={$productsView} {currentProduct} />
 		{/if}
+		</div>
 	</div>
 	<slot />
 </main>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index a16ac9c..c0ec922 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -3,7 +3,7 @@
 	import Feature from '$lib/Feature/Feature.svelte';
 	import { products, productsView, tags, currentProduct, emotions } from '$lib/stores';
 	import { browser } from '$app/env';
-	import {normalize, parseSlug } from '$helpers';
+	import { normalize, parseSlug } from '$helpers';
 
 	export let data;
 	products.set(data.products);

From f379400b6b4b0121122242d6cfd22d0cd1133d53 Mon Sep 17 00:00:00 2001
From: Xinrui Chen <xynree@gmail.com>
Date: Tue, 19 Jul 2022 15:21:23 -0700
Subject: [PATCH 2/9] Added mui icon dependancy

---
 package.json                             | 1 +
 src/lib/Feature/Feature.svelte           | 1 +
 src/lib/Feature/PrevNext/PrevNext.svelte | 0
 yarn.lock                                | 9 ++++++++-
 4 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/Feature/PrevNext/PrevNext.svelte

diff --git a/package.json b/package.json
index f47b321..a5f6f4e 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@mui/icons-material": "^5.8.4",
 		"@sanity/client": "^3.3.2",
 		"@sanity/image-url": "^1.0.1",
 		"@sanity/types": "^2.29.5"
diff --git a/src/lib/Feature/Feature.svelte b/src/lib/Feature/Feature.svelte
index 1ca2f24..8e8bce7 100644
--- a/src/lib/Feature/Feature.svelte
+++ b/src/lib/Feature/Feature.svelte
@@ -2,6 +2,7 @@
 	import { urlFor } from '$lib/sanityClient';
 	import { currentProduct } from '$lib/stores';
 	import Rating from './Rating/Rating.svelte';
+	import PrevNext from './PrevNext/PrevNext.svelte';
 	import Tag from './Tag/Tag.svelte';
 
 	const { container, imageView, name, description, productInfo, date, tags, img, ratings } = {
diff --git a/src/lib/Feature/PrevNext/PrevNext.svelte b/src/lib/Feature/PrevNext/PrevNext.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/yarn.lock b/yarn.lock
index 2a277f4..61fe865 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -820,7 +820,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.8.4":
+"@babel/runtime@^7.17.2", "@babel/runtime@^7.8.4":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@@ -1010,6 +1010,13 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
+"@mui/icons-material@^5.8.4":
+  version "5.8.4"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.8.4.tgz#3f2907c9f8f5ce4d754cb8fb4b68b5a1abf4d095"
+  integrity sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"

From 45e73d4ccad9afda6a39135b781385af61f10959 Mon Sep 17 00:00:00 2001
From: Xinrui Chen <xynree@gmail.com>
Date: Tue, 19 Jul 2022 15:33:11 -0700
Subject: [PATCH 3/9] feat: update dependancy

---
 src/lib/Feature/Feature.svelte           |  1 +
 src/lib/Feature/PrevNext/PrevNext.svelte | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/src/lib/Feature/Feature.svelte b/src/lib/Feature/Feature.svelte
index 8e8bce7..b415622 100644
--- a/src/lib/Feature/Feature.svelte
+++ b/src/lib/Feature/Feature.svelte
@@ -45,6 +45,7 @@
 			{/each}
 		</div>
 	{/if}
+	<PrevNext />
 </div>
 
 <style>
diff --git a/src/lib/Feature/PrevNext/PrevNext.svelte b/src/lib/Feature/PrevNext/PrevNext.svelte
index e69de29..e4289c8 100644
--- a/src/lib/Feature/PrevNext/PrevNext.svelte
+++ b/src/lib/Feature/PrevNext/PrevNext.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { currentProduct } from '$lib/stores';
+  import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';
+  import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+
+	const { container } = {
+		container: 'flex justify-between'
+	};
+</script>
+
+<div class={container} >
+<ArrowLeftIcon /> <ArrowRightIcon />
+</div>

From b8ecf536d9521a167ee30b96df103f917b0eb0ea Mon Sep 17 00:00:00 2001
From: Xinrui Chen <xynree@gmail.com>
Date: Tue, 19 Jul 2022 16:39:56 -0700
Subject: [PATCH 4/9] feat: navigation for prev/next with parameter updating

---
 package.json                             |  1 -
 src/lib/Feature/PrevNext/PrevNext.svelte | 51 ++++++++++++++++++++----
 vite.config.js                           |  2 +-
 yarn.lock                                |  9 +----
 4 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index a5f6f4e..f47b321 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,6 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@mui/icons-material": "^5.8.4",
 		"@sanity/client": "^3.3.2",
 		"@sanity/image-url": "^1.0.1",
 		"@sanity/types": "^2.29.5"
diff --git a/src/lib/Feature/PrevNext/PrevNext.svelte b/src/lib/Feature/PrevNext/PrevNext.svelte
index e4289c8..b0316a5 100644
--- a/src/lib/Feature/PrevNext/PrevNext.svelte
+++ b/src/lib/Feature/PrevNext/PrevNext.svelte
@@ -1,13 +1,50 @@
 <script>
-	import { currentProduct } from '$lib/stores';
-  import ArrowLeftIcon from '@mui/icons-material/ArrowLeft';
-  import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+	import { currentProduct, products } from '$lib/stores'; 
+  import { toProduct } from '$helpers';
 
-	const { container } = {
-		container: 'flex justify-between'
+  $: foundIndex =  $products.findIndex((prod) => prod._id === $currentProduct._id)
+  $: PREV = $products[foundIndex-1];
+  $: NEXT = $products[foundIndex+1];
+
+  const navigate = (e) => {
+    if (e.target.name === 'prev' && PREV) {
+      toProduct(PREV, currentProduct)
+    } 
+    if (e.target.name === 'next' && NEXT){
+      toProduct(NEXT, currentProduct)
+    }
+  }
+
+	const { container, btn } = {
+		container: 'flex justify-between h-12  ml-16 mr-16',
+    btn: 'flex items-center gap-4'
 	};
 </script>
 
-<div class={container} >
-<ArrowLeftIcon /> <ArrowRightIcon />
+<div class={container}>
+	{#if PREV }
+  <button on:click={navigate} class={btn} name={'prev'}
+		><svg focusable="false" width={50} height={50} viewBox="0 0 24 24">
+			<path d="m14 7-5 5 5 5V7z" />
+		</svg>{PREV.name}</button
+	>
+  {:else}
+  <div></div>
+  {/if}
+
+  {#if NEXT}
+	<button on:click={navigate} class={btn} name={'next'}
+  	>{NEXT.name}<svg focusable="false" width={50} height={50} viewBox="0 0 24 24"
+			><path d="m10 17 5-5-5-5v10z" /></svg
+		></button
+	>
+  {:else}
+  <div></div>
+  {/if}
 </div>
+
+<style>
+  svg,path {
+    pointer-events: none;
+  }
+</style>
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index c4c4c03..cd66f4d 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,7 +3,7 @@ import { resolve } from 'path';
 
 /** @type {import('vite').UserConfig} */
 const config = {
-	plugins: [sveltekit()],
+	plugins: [sveltekit()],	
 	resolve: {
 		alias: {
 			$lib: resolve('./src/lib'),
diff --git a/yarn.lock b/yarn.lock
index 61fe865..2a277f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -820,7 +820,7 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/runtime@^7.17.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.8.4":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@@ -1010,13 +1010,6 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
-"@mui/icons-material@^5.8.4":
-  version "5.8.4"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.8.4.tgz#3f2907c9f8f5ce4d754cb8fb4b68b5a1abf4d095"
-  integrity sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==
-  dependencies:
-    "@babel/runtime" "^7.17.2"
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"

From 2a999137f5aef83d9853e44d7253f37dc876ec05 Mon Sep 17 00:00:00 2001
From: Xinrui Chen <xynree@gmail.com>
Date: Tue, 19 Jul 2022 16:58:29 -0700
Subject: [PATCH 5/9] fix: adjusted products store to productsView for prev
 next nav

---
 src/lib/Feature/PrevNext/PrevNext.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/Feature/PrevNext/PrevNext.svelte b/src/lib/Feature/PrevNext/PrevNext.svelte
index b0316a5..060e8a5 100644
--- a/src/lib/Feature/PrevNext/PrevNext.svelte
+++ b/src/lib/Feature/PrevNext/PrevNext.svelte
@@ -1,10 +1,10 @@
 <script>
-	import { currentProduct, products } from '$lib/stores'; 
+	import { currentProduct, productsView } from '$lib/stores'; 
   import { toProduct } from '$helpers';
 
-  $: foundIndex =  $products.findIndex((prod) => prod._id === $currentProduct._id)
-  $: PREV = $products[foundIndex-1];
-  $: NEXT = $products[foundIndex+1];
+  $: foundIndex =  $productsView.findIndex((prod) => prod._id === $currentProduct._id)
+  $: PREV = $productsView[foundIndex-1];
+  $: NEXT = $productsView[foundIndex+1];
 
   const navigate = (e) => {
     if (e.target.name === 'prev' && PREV) {

From 0f216c90737dd90cdd99c8bf2812e5cd322373ce Mon Sep 17 00:00:00 2001
From: Xinrui Chen <xynree@gmail.com>
Date: Wed, 20 Jul 2022 10:46:04 -0700
Subject: [PATCH 6/9] update: refactored `toProduct` function and added docs

---
 src/helpers/getAvgRating.js |  4 ++++
 src/helpers/normalize.js    |  4 ++++
 src/helpers/parse.js        |  8 ++++++++
 src/helpers/toProduct.js    | 41 ++++++++++++++++++++++++++++++-------
 src/routes/index.svelte     |  3 +--
 5 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/src/helpers/getAvgRating.js b/src/helpers/getAvgRating.js
index 9484a62..788e1f6 100644
--- a/src/helpers/getAvgRating.js
+++ b/src/helpers/getAvgRating.js
@@ -1,3 +1,7 @@
+/**
+ * @param {rating[]} ratings An array of ratings
+ * @returns {number} Average rating
+ */
 export const getAvgRating = (ratings) => {
   if (!ratings) return 0;
 	if (ratings.length === 1) return ratings[0].rating;
diff --git a/src/helpers/normalize.js b/src/helpers/normalize.js
index 03f27d8..2a31bd1 100644
--- a/src/helpers/normalize.js
+++ b/src/helpers/normalize.js
@@ -1,2 +1,6 @@
+/**
+ * @param {string} str Any string
+ * @returns {string} Lowercased string without any extra spaces
+ */
 export const normalize = (str) => str.toLowerCase().trim()
 
diff --git a/src/helpers/parse.js b/src/helpers/parse.js
index 2cfc748..53fe649 100644
--- a/src/helpers/parse.js
+++ b/src/helpers/parse.js
@@ -1,9 +1,17 @@
 import {normalize }from './normalize';
 
+/**
+ * @param {string} slug Slug of a product name
+ * @returns Normalized slug with all dashes replaced with spaces
+ */
 export function parseSlug(slug) {
     return normalize(slug).replaceAll("-", " ")
 }
 
+/**
+ * @param {string} name Product name
+ * @returns Normalized name with all spaces replaced with '-'
+ */
 export function parseName(name) {
     return normalize(name).replaceAll(" ","-")
 }
\ No newline at end of file
diff --git a/src/helpers/toProduct.js b/src/helpers/toProduct.js
index 4c01a23..1209575 100644
--- a/src/helpers/toProduct.js
+++ b/src/helpers/toProduct.js
@@ -1,8 +1,35 @@
-import {normalize, parseName} from './index';
+import { parseName, parseSlug, normalize } from './';
 
-export const toProduct = (product, currentProduct) => {
-  const url = new URL(window.location);
-  url.searchParams.set('product', normalize(parseName(product.name)));
-  window.history.pushState({}, '', url);
-  currentProduct.set(product)
-}
+/**
+ * Updates a url with search parameters to match product name of product passed in.
+ * @param {URL} url a URL object
+ * @param {object} product
+ * @returns {URL} a URL object with search parameters appended.
+ */
+const setUrlParam = (url, product) => {
+	url.searchParams.set('product', parseName(product.name));
+	return url;
+};
+
+/**
+ * Updates Window URL and checks that it is equal to product name
+ * @param {URL} url a URL object
+ * @param {product} product product to check URL against
+ * @returns {Boolean} True if URL parameter is equal to product name
+ */
+const didWinUrlUpdate = (url, product) => {
+	window.history.pushState(window.history.state, '', url);
+	const params = new URLSearchParams(window.location.search).get('product');
+	return parseSlug(params) === normalize(product.name);
+};
+
+/**
+ * Takes a `product` and `currentProduct` store
+ * Sets URL params to parsed product name and updates Browser URL
+ * Sets `currentProduct` store to `product`.
+ * @param {object} product The product to switch feature to.
+ * @param {store} currentProduct currentProduct store
+ */
+export const toProduct = (product, currentProduct) =>
+	didWinUrlUpdate(setUrlParam(new URL(window.location), product), product) &&
+	currentProduct.set(product)
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index c0ec922..393d1fc 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -12,8 +12,7 @@
 
 	productsView.set(data.products);
 	const goToProduct = () => {
-		const params = new URLSearchParams(window.location.search);
-		const paramProd = params.get('product');
+		const paramProd = (new URLSearchParams(window.location.search)).get('product');
 
 		if (paramProd) {
 			const foundProduct = $products.find(

From b72b578253bb42cfc12c5c0d005bb03d513b9570 Mon Sep 17 00:00:00 2001
From: Xinrui Chen <xynree@gmail.com>
Date: Wed, 20 Jul 2022 14:55:26 -0700
Subject: [PATCH 7/9] styles: adjust feature styling

---
 src/lib/Feature/Feature.svelte           | 2 +-
 src/lib/Feature/PrevNext/PrevNext.svelte | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/Feature/Feature.svelte b/src/lib/Feature/Feature.svelte
index b415622..55afdaf 100644
--- a/src/lib/Feature/Feature.svelte
+++ b/src/lib/Feature/Feature.svelte
@@ -10,7 +10,7 @@
 		imageView: 'flex m-16 gap-12 w-100',
 		productInfo: 'flex flex-col gap-2',
 		name: 'font-bold text-2xl',
-		description: '',
+		description: 'leading-5',
 		date: 'text-xs w-2/3 mt-auto mb-4',
 		tags: 'flex gap-1',
 		img: 'p-8 border w-72 h-72 min-w-36 min-h-36  border-black border-2 p-3',
diff --git a/src/lib/Feature/PrevNext/PrevNext.svelte b/src/lib/Feature/PrevNext/PrevNext.svelte
index 060e8a5..3b8e12d 100644
--- a/src/lib/Feature/PrevNext/PrevNext.svelte
+++ b/src/lib/Feature/PrevNext/PrevNext.svelte
@@ -26,7 +26,7 @@
   <button on:click={navigate} class={btn} name={'prev'}
 		><svg focusable="false" width={50} height={50} viewBox="0 0 24 24">
 			<path d="m14 7-5 5 5 5V7z" />
-		</svg>{PREV.name}</button
+		</svg><span class='text-left'>{PREV.name}</span></button
 	>
   {:else}
   <div></div>
@@ -34,7 +34,7 @@
 
   {#if NEXT}
 	<button on:click={navigate} class={btn} name={'next'}
-  	>{NEXT.name}<svg focusable="false" width={50} height={50} viewBox="0 0 24 24"
+  	><span class='text-right'>{NEXT.name}</span><svg focusable="false" width={50} height={50} viewBox="0 0 24 24"
 			><path d="m10 17 5-5-5-5v10z" /></svg
 		></button
 	>

From 8b24676720f35e980aabc5ca904fbd8e775fc14e Mon Sep 17 00:00:00 2001
From: Xinrui Chen <xynree@gmail.com>
Date: Wed, 20 Jul 2022 17:19:15 -0700
Subject: [PATCH 8/9] Added favicon closes #24

---
 src/lib/Feature/PrevNext/PrevNext.svelte |  79 ++++++++++++-----------
 src/lib/Layout/Filters.svelte            |   2 +-
 src/lib/Layout/Products.svelte           |   2 +-
 src/lib/Layout/Search.svelte             |   2 +-
 src/routes/__layout.svelte               |   8 +--
 static/favicon.png                       | Bin 1571 -> 1795 bytes
 6 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/src/lib/Feature/PrevNext/PrevNext.svelte b/src/lib/Feature/PrevNext/PrevNext.svelte
index 3b8e12d..1dad7be 100644
--- a/src/lib/Feature/PrevNext/PrevNext.svelte
+++ b/src/lib/Feature/PrevNext/PrevNext.svelte
@@ -1,50 +1,55 @@
 <script>
-	import { currentProduct, productsView } from '$lib/stores'; 
-  import { toProduct } from '$helpers';
+	import { currentProduct, productsView } from '$lib/stores';
+	import { toProduct } from '$helpers';
 
-  $: foundIndex =  $productsView.findIndex((prod) => prod._id === $currentProduct._id)
-  $: PREV = $productsView[foundIndex-1];
-  $: NEXT = $productsView[foundIndex+1];
+	$: foundIndex = $productsView.findIndex((prod) => prod._id === $currentProduct._id);
+	$: PREV = $productsView[foundIndex - 1];
+	$: NEXT = $productsView[foundIndex + 1];
 
-  const navigate = (e) => {
-    if (e.target.name === 'prev' && PREV) {
-      toProduct(PREV, currentProduct)
-    } 
-    if (e.target.name === 'next' && NEXT){
-      toProduct(NEXT, currentProduct)
-    }
-  }
+	const navigate = (e) => {
+		if (e.target.name === 'prev' && PREV) {
+			toProduct(PREV, currentProduct);
+		}
+		if (e.target.name === 'next' && NEXT) {
+			toProduct(NEXT, currentProduct);
+		}
+	};
 
 	const { container, btn } = {
-		container: 'flex justify-between h-12  ml-16 mr-16',
-    btn: 'flex items-center gap-4'
+		container: 'flex justify-between m-16 mt-2 mb-6 h-12  ',
+		btn: 'flex items-center gap-4'
 	};
 </script>
 
 <div class={container}>
-	{#if PREV }
-  <button on:click={navigate} class={btn} name={'prev'}
-		><svg focusable="false" width={50} height={50} viewBox="0 0 24 24">
-			<path d="m14 7-5 5 5 5V7z" />
-		</svg><span class='text-left'>{PREV.name}</span></button
-	>
-  {:else}
-  <div></div>
-  {/if}
+	{#if PREV}
+		<button on:click={navigate} class={btn} name={'prev'}
+			><svg focusable="false" width={50} height={50} viewBox="0 0 24 24">
+				<path d="m14 7-5 5 5 5V7z" />
+			</svg><span class="text-left">{PREV.name}</span></button
+		>
+	{:else}
+		<div />
+	{/if}
 
-  {#if NEXT}
-	<button on:click={navigate} class={btn} name={'next'}
-  	><span class='text-right'>{NEXT.name}</span><svg focusable="false" width={50} height={50} viewBox="0 0 24 24"
-			><path d="m10 17 5-5-5-5v10z" /></svg
-		></button
-	>
-  {:else}
-  <div></div>
-  {/if}
+	{#if NEXT}
+		<button on:click={navigate} class={btn} name={'next'}
+			><span class="text-right">{NEXT.name}</span><svg
+				focusable="false"
+				width={50}
+				height={50}
+				viewBox="0 0 24 24"><path d="m10 17 5-5-5-5v10z" /></svg
+			></button
+		>
+	{:else}
+		<div />
+	{/if}
 </div>
 
 <style>
-  svg,path {
-    pointer-events: none;
-  }
-</style>
\ No newline at end of file
+	svg,
+	path,
+	span {
+		pointer-events: none;
+	}
+</style>
diff --git a/src/lib/Layout/Filters.svelte b/src/lib/Layout/Filters.svelte
index a1578a0..ecf234b 100644
--- a/src/lib/Layout/Filters.svelte
+++ b/src/lib/Layout/Filters.svelte
@@ -39,7 +39,7 @@
 	};
 
 	const { container, filterBar, filterTitle, filterSort } = {
-		container: 'flex flex-col text-sm h-auto mb-4 mr-6',
+		container: 'flex flex-col text-sm h-auto mb-4 mr-6 mt-4',
 		filterBar: 'pl-8 p-2 pr-2  flex justify-between',
 		filterTitle: 'font-bold',
 		filterSort: 'p-1 pl-9  mr-12 hover:bg-blue-300 w-full focus:outline-none'
diff --git a/src/lib/Layout/Products.svelte b/src/lib/Layout/Products.svelte
index 7159a55..fec57bc 100644
--- a/src/lib/Layout/Products.svelte
+++ b/src/lib/Layout/Products.svelte
@@ -14,7 +14,7 @@
 	{#each productsView as product}
 		<button class={productStyle} on:click={() => toProduct(product, currentProduct)}>
 			<p
-				class={`pl-12 hover:bg-gray-200 ${
+				class={`pl-10 hover:bg-gray-200 ${
 					$currentProduct && $currentProduct.name === product.name ? 'bg-blue-300' : ''
 				} text-sm`}
 			>
diff --git a/src/lib/Layout/Search.svelte b/src/lib/Layout/Search.svelte
index b0da050..44189d2 100644
--- a/src/lib/Layout/Search.svelte
+++ b/src/lib/Layout/Search.svelte
@@ -9,7 +9,7 @@
 	};
 
 	const { container, input } = {
-		container: 'h-16 ml-auto mr-auto',
+		container: 'h-12 ml-auto mr-auto flex justify-center items-center',
 		input: 'outline outline-1 w-36 focus:outline-blue-600 p-1 text-sm'
 	};
 </script>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 99b1fda..ec9e4f9 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -19,7 +19,7 @@
 	const { main, container, sidebar } = {
 		main: 'flex w-screen h-screen sfmono',
 		container: 'flex flex-col h-screen justify-start shrink-0 overflow-auto w-56',
-		sidebar: 'pt-1 flex flex-col shrink-0'
+		sidebar: ' flex flex-col shrink-0'
 	};
 </script>
 
@@ -27,13 +27,13 @@
 	<div class={container}>
 		<Header {reset} />
 		<div class={sidebar}>
-		{#if !Object.keys($currentProduct).length}
 			<Search />
+			{#if !Object.keys($currentProduct).length}
 			<Filters bind:filters {reset} />
 			<Sort />
-		{:else}
+			{:else}
 			<Products productsView={$productsView} {currentProduct} />
-		{/if}
+			{/if}
 		</div>
 	</div>
 	<slot />
diff --git a/static/favicon.png b/static/favicon.png
index 825b9e65af7c104cfb07089bb28659393b4f2097..c7ba7b262b602db7f5566438e2c4342dc7ba0386 100644
GIT binary patch
literal 1795
zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY1|&n@Zgyv2U`)((b`HpPc6ZLt$u9~nNK8(3
z$t*6&NvsSoW?;~mn4FLh<f)@^A~7)`;lx>OO|GKyppK57poIDp2l!g{@FekYb)G!R
z+Q-Of=b*}CASGI}``7`FMf$Is&RD6MZuQ(6ci?)`vJY3g*SpL%xVo5O-IObjQWXBO
zcLY!7?(&k5kO*$bdHQJ*lfZ7~6JnZ7R$M3MF()l|z9H@KMup=yM})7(1mg*{%qPM;
z&UvuRI{1V6#5GSRA%FKI=eMkkdDG84YMOJztCb;{X`L$blqF$P8Zw^$X*#v&%$FV^
zR`&#rrCJrwRA0Z;kdTy^Wo*!JNM_NmVg(Bw$)o2Kj?8**Y;fb<e;~+fnQ^_2t*zH#
zZj7~Hl9U(^PtzS99`!OY6*1MO))|d6G<AC$A6_nEW4q_U#`cig!S>?O%wui|m2PtC
zY;4!6|NpNK0|wOmGY3ADANv1)zxdz(|H};nKFhMTF;_B(DyF_OJ$~^wFw84bBRtc5
zeHpZXYz_uiMm7d!Ad8WK2}npWu!7kP3|@@VaCQ)*20~4HCIbspO%#v@ffgWUgwsq5
znBXcr7BC~&Af;35;y|i73p^r=85l%-L6~vMsa|~s1}6T@kcg59UmvUF{9L`nl>DSr
zy^7odkS+$B3M(KpH?<^Dp&~aYuh^=>Rtc=a3djZt>nkaMm6T-LDn<APC^+XAr7D=|
z8R!`(*>Nc-DA*LGq*(>IxIwi8dA3R!B_#z``ugSN<$C4Ddih1^`i7R4mih)p`bI{&
zKoz>hm3bwJ6}oxF$`C_f=D4I5Cl_TFlw{`TDS*sPOv*1Uu~kw6Sp)|Vca~(PA#BPk
zhI$L=L4A;nzM-ChKHO}eRvVD0Rb)_VaehuI$b36PV<Q`|S`<-)O%NRsSal$aqU#9A
z$S=tUhFno*vS(gNYEeNEFciTy!tBGX0^KZx<)L|*C3Y|a(1fA7Z1h1vh7^R5_yLOo
zBgl@+Mjsy8K&d^FwZNpY($mE;q=ND7t;V9m3LFd<(zgHq|McC7F82;MlLa$2?bgfc
zZ4^(c-n}>OqcD@A0F&Z_u!PwnH*bH~waRj(o|?}sA$I40)84s?J!^`5EZ&!Ah52Px
zSKkiuT6uBXp~7$HH)h}RRtmGw`Bh?TcJGQT>y)Og$1cXjFXhqRo+825>-;)!Guy1D
z<^U;={X1qHEIfWu@8>xS#cAu3Hr#5Cd602uj^5Q%u_cYp$$LJp$YgqJATZ<D+{K((
zTdF5+X^45OP{2RwnA{c?KBd||%`~&RSNB-G#6SIr_?T0jwC8h&ZmaXgD7me13sMUO
zyt=M@b}c;qQZt<A+)cqxnqpqB<)&yIkDPS&;RflLGpkuObPtK;^PM}*Imsrf;oBaS
z?kdI!M*>f~b8QLt&o%UP=zG3Iz2%q&<1aRutfCC@^7rT0tUst(`zAg#VA~VEJ^ZgG
zynQ^Od}R~gWVt5_zN$N8LMN1LbU*JMG&fRjxBJv@GVcULkGMwIH%M^2XA=-l{QJ=1
z$D6}~@j7bZcON=TuvJ>f^8WFT_T=;Tn?oL{#h>v@&=L=bO37eNTpA#=)aJ}INv@P>
ztq%_cH*A=spnuEk%;xHsnbi}@B}C>1Io9w$s^vL%xR6Ug#V>HlRhG{$vRNLODD;JR
ziwQD{6&9{3dpGy{a;Cr~*HYXSec5+4mn=70@_ZM=ryi5H$#GTeKlfa7pE&>iE%_+N
z9r;t5mPi+5^2x7Xd-D1AZ|zKu1-CdO!><%9xMqFgdGgf24DTgR8#HckELqyfz^%=7
zE5P&C)h#vx2M+Xyn(8vUXg{6*<j-xUOvwet?sYCqGwqG-e_1H_Ob!$7`zj;PeWiJ#
zwR%I5R*Fsohub<y2TM^SF$Wgq>pTnQa7hOLWY^ksuj{OL^NIzc`I$##z-dl^NvY93
XFyOqw`}?~TK&6(atDnm{r-UW|ji8v0

literal 1571
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
VHuiSbmk|H}002ovPDHLkV1f%e^4kCa


From e9538c577621edc7a8672d4ead03a7e9ab642b85 Mon Sep 17 00:00:00 2001
From: Xinrui Chen <xynree@gmail.com>
Date: Wed, 20 Jul 2022 22:15:43 -0700
Subject: [PATCH 9/9] Cleaned up `index.svelte` and condensed helper functions

---
 src/helpers/index.js     |  4 ++--
 src/helpers/normalize.js |  6 ------
 src/helpers/param.js     | 36 ++++++++++++++++++++++++++++++++++++
 src/helpers/parse.js     |  7 ++++++-
 src/helpers/toProduct.js | 17 +++--------------
 src/routes/index.svelte  | 37 +++++++++++++------------------------
 6 files changed, 60 insertions(+), 47 deletions(-)
 delete mode 100644 src/helpers/normalize.js
 create mode 100644 src/helpers/param.js

diff --git a/src/helpers/index.js b/src/helpers/index.js
index 2b2a141..8cf2389 100644
--- a/src/helpers/index.js
+++ b/src/helpers/index.js
@@ -1,4 +1,4 @@
 export * from './toProduct';
 export * from './parse';
-export * from './normalize';
-export * from './getAvgRating';
\ No newline at end of file
+export * from './getAvgRating';
+export * from './param';
\ No newline at end of file
diff --git a/src/helpers/normalize.js b/src/helpers/normalize.js
deleted file mode 100644
index 2a31bd1..0000000
--- a/src/helpers/normalize.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * @param {string} str Any string
- * @returns {string} Lowercased string without any extra spaces
- */
-export const normalize = (str) => str.toLowerCase().trim()
-
diff --git a/src/helpers/param.js b/src/helpers/param.js
new file mode 100644
index 0000000..02e3143
--- /dev/null
+++ b/src/helpers/param.js
@@ -0,0 +1,36 @@
+import { normalize, parseSlug, parseName } from './';
+
+/**
+ * Gets parameter from URL of field. Defaults to 'product'
+ * @param {string} field='product'
+ * @returns {string} parameter of field
+ */
+export const getProdParam = (field = 'product') =>
+	new URLSearchParams(window.location.search).get(field) || ''
+
+/**
+ * Finds a product in products store with matching name as parameter.
+ * @param {*} param parameter
+ * @param {*} $products products store
+ * @returns
+ */
+export const findProdFromParam = (param, $products) => 
+	$products.find(({ name }) => normalize(name) === parseSlug(param)) || {}
+
+/**
+ * Resets params and navigates back to index
+ */
+export const resetParams = () => history.pushState({}, '', new URL(window.location.origin));
+
+/**
+ * Updates a url with search parameters with name of product parameter.
+ * @param {URL} url a URL object
+ * @param {object} product
+ * @returns {URL} a URL object with search parameters appended.
+ */
+export const setUrlParam = (url, product) => {
+	url.searchParams.set('product', parseName(product.name));
+	return url;
+};
+
+
diff --git a/src/helpers/parse.js b/src/helpers/parse.js
index 53fe649..a5e0444 100644
--- a/src/helpers/parse.js
+++ b/src/helpers/parse.js
@@ -1,4 +1,9 @@
-import {normalize }from './normalize';
+
+/**
+ * @param {string} str Any string
+ * @returns {string} Lowercased string without any extra spaces
+ */
+ export const normalize = (str) => str.toLowerCase().trim()
 
 /**
  * @param {string} slug Slug of a product name
diff --git a/src/helpers/toProduct.js b/src/helpers/toProduct.js
index 1209575..4267ea1 100644
--- a/src/helpers/toProduct.js
+++ b/src/helpers/toProduct.js
@@ -1,15 +1,4 @@
-import { parseName, parseSlug, normalize } from './';
-
-/**
- * Updates a url with search parameters to match product name of product passed in.
- * @param {URL} url a URL object
- * @param {object} product
- * @returns {URL} a URL object with search parameters appended.
- */
-const setUrlParam = (url, product) => {
-	url.searchParams.set('product', parseName(product.name));
-	return url;
-};
+import { parseSlug, normalize, setUrlParam, resetParams } from './';
 
 /**
  * Updates Window URL and checks that it is equal to product name
@@ -31,5 +20,5 @@ const didWinUrlUpdate = (url, product) => {
  * @param {store} currentProduct currentProduct store
  */
 export const toProduct = (product, currentProduct) =>
-	didWinUrlUpdate(setUrlParam(new URL(window.location), product), product) &&
-	currentProduct.set(product)
+	didWinUrlUpdate(setUrlParam(new URL(window.location), product), product)?
+	currentProduct.set(product): resetParams()
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 393d1fc..0fe61f4 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,43 +1,32 @@
 <script>
+	import { browser } from '$app/env';
 	import Grid from '$lib/Grid.svelte';
 	import Feature from '$lib/Feature/Feature.svelte';
 	import { products, productsView, tags, currentProduct, emotions } from '$lib/stores';
-	import { browser } from '$app/env';
-	import { normalize, parseSlug } from '$helpers';
+	import { findProdFromParam, getProdParam, resetParams } from '$helpers';
 
 	export let data;
+
 	products.set(data.products);
-	tags.set(data.tags);
-	emotions.set(data.emotions)
-
 	productsView.set(data.products);
-	const goToProduct = () => {
-		const paramProd = (new URLSearchParams(window.location.search)).get('product');
+	tags.set(data.tags);
+	emotions.set(data.emotions);
 
-		if (paramProd) {
-			const foundProduct = $products.find(
-				({ name }) => normalize(name) === normalize(parseSlug(paramProd))
-			);
-			if (foundProduct) {
-				currentProduct.set(foundProduct);
-			}
-		} else {
-			const url = new URL(window.location.origin);
-			history.pushState({}, '', url);
-			currentProduct.set({});
-		}
+	const load = () => {
+		currentProduct.set(findProdFromParam(getProdParam(), $products));
+		if (getProdParam() && JSON.stringify($currentProduct) === '{}') resetParams();
 	};
 
 	if (browser) {
-		goToProduct();
+		load();
 		window.onpopstate = () => {
-			goToProduct();
-		}
+			load();
+		};
 	}
 
-	const { container} = {
+	const { container } = {
 		container: 'h-screen overflow-auto w-screen'
-	}
+	};
 </script>
 
 <svelte:head>