From 56a3f3a7cd2467725d30243fe50d1d145bbf5ae2 Mon Sep 17 00:00:00 2001
From: Chris Milkaitis <chris.milkaitis@gmail.com>
Date: Mon, 26 Jul 2021 21:24:06 -0400
Subject: [PATCH 1/2] Add wanted filter

---
 src/routes/index.svelte | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 10fcbb1..a229576 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -10,6 +10,7 @@
     let shownThings;
     let shownLocation;
     let searchText = "";
+    let showWantedItems = false;
 
     onMount(async () => {
         data = await things.getAll();
@@ -17,6 +18,7 @@
     });
 
     function showAll() {
+        showWantedItems = false;
         shownLocation = null;
         shownThings = filtered();
     }
@@ -31,14 +33,23 @@
             filtered = filtered.filter(thing => thing.location === shownLocation);
         if (searchText.length > 0)
             filtered = filtered.filter(thing => thing.name.toLowerCase().includes(searchText.toLowerCase()));
-        
+        if (showWantedItems)
+            filtered = filtered.filter(thing => thing.stock < 1);
+
         return filtered;
     }
 
     function filterByLocation(location) {
+        showWantedItems = false;
         shownLocation = location;
         shownThings = filtered();
     }
+
+    function filterByWanted() {
+        showWantedItems = true;
+        shownLocation = null;
+        shownThings = filtered();
+    }
 </script>
 
 <Header />
@@ -53,10 +64,11 @@
                 placeholder="Search..."
             />
             <div class="flex flex-row flex-wrap gap-4">
-                <button on:click={showAll} class:selected={shownLocation == null} class="bg-indigo-100 px-2 py-1 rounded brutal hovers font-bold outline-none">All</button>
+                <button on:click={showAll} class:selected={shownLocation == null && !showWantedItems} class="bg-indigo-100 px-2 py-1 rounded brutal hovers font-bold outline-none">All</button>
                 {#each data.locations as location}
                     <button on:click={() => filterByLocation(location)} class:selected={shownLocation === location} class="bg-indigo-100 px-2 py-1 rounded brutal hovers font-bold outline-none">{location}</button>
                 {/each}
+                <button on:click={filterByWanted} class:toggled={showWantedItems} class="bg-red-100 px-2 py-1 rounded brutal hovers font-bold outline-none">Wanted</button>
             </div>
         </div>
         {#key shownThings}
@@ -76,4 +88,8 @@
     button.selected {
         @apply bg-green-200;
     }
+
+    button.toggled {
+        @apply bg-red-300;
+    }
 </style>
\ No newline at end of file

From c78855bc340fa2857d0435743ea20678fd32a998 Mon Sep 17 00:00:00 2001
From: Chris Milkaitis <chris.milkaitis@gmail.com>
Date: Mon, 26 Jul 2021 21:48:06 -0400
Subject: [PATCH 2/2] Tags aligned folks

---
 src/components/Scroller.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Scroller.svelte b/src/components/Scroller.svelte
index 78f5229..5260b25 100644
--- a/src/components/Scroller.svelte
+++ b/src/components/Scroller.svelte
@@ -13,7 +13,7 @@
             <Card style="h-24 w-24 lg:h-48 lg:w-48">
                 <Image height="full" src={thing.image} alt={thing.name} />
             </Card>
-            <div class="pl-1 pt-2 w-24 lg:w-48 flex flex-col gap-2 space-between">
+            <div class="pl-1 pt-2 w-24 lg:w-48 flex flex-col gap-2 justify-between flex-grow">
                 <Text bold smallauto>{thing.name}</Text>
                 <div class="flex flex-col lg:flex-row gap-2">
                     {#if thing.location}