add a search bar

src/routes/GameList.svelte

@@ -3,10 +3,21 @@
         <input type="checkbox" bind:checked={show_hidden} />
         <span> show hidden </span>
     </label>
+    <div class="field label prefix border">
+        <i>search</i>
+        <input type="text" bind:value={search_text} />
+        <label>Search</label>
+    </div>
 </div>
 
 <div class="games">
-    {#each games as game}
+    {#each games.filter((game) => {
+        if (search_text.length < 3) return true;
+        const target = search_text.toLowerCase();
+        return game.name.toLowerCase().includes(target) || game.username
+                .toLowerCase()
+                .includes(target);
+    }) as game}
         {#if show_hidden || !$games_hidden[[game.username, game.bgg_id].join('!')]}
             <div
                 transition:slide={{ delay: 250, duration: 300 }}
@@ -94,6 +105,8 @@
 
     let show_hidden = false;
 
+    let search_text = '';
+
     // add filter
     // add sort (user, game, price)
 
@@ -144,4 +157,7 @@
         display: flex;
         flex-direction: row-reverse;
     }
+    .options > div {
+        margin-right: 1em;
+    }
 </style>