can hide games

package.json

@@ -37,10 +37,12 @@
         "@sveltejs/adapter-node": "^4.0.1",
         "@sveltejs/adapter-static": "^3.0.1",
         "@vincjo/datatables": "^1.14.4",
+        "@yanick/updeep-remeda": "^2.2.0",
         "beercss": "^3.4.13",
         "better-sqlite3": "^9.3.0",
         "cheerio": "1.0.0-rc.12",
         "node-fetch": "^3.3.2",
+        "svelte-persisted-store": "^0.9.0",
         "vite-multiple-assets": "^1.2.10"
     }
 }

src/routes/+layout.svelte

@@ -9,7 +9,9 @@
     import 'beercss/dist/cdn/beer.min.css';
     import { setContext } from 'svelte';
     import { dev, browser } from '$app/environment';
-    import { readable } from 'svelte/store';
+    import { readable, writable } from 'svelte/store';
+    import { persisted } from 'svelte-persisted-store';
+    import u from '@yanick/updeep-remeda';
 
     const prefix = dev ? '/dev/' : '/db/';
 
@@ -38,6 +40,20 @@
         return () => {};
     });
     setContext('sellers', sellers);
+
+    const games_hidden = writable(
+        JSON.parse(localStorage.getItem('games_hidden') || '{}'),
+    );
+    games_hidden.toggle = (username, bgg_id) => {
+        console.log({ username, bgg_id });
+        games_hidden.update(
+            u.updateIn([username, bgg_id].join('!'), (v) => !v),
+        );
+    };
+    setContext('games_hidden', games_hidden);
+    games_hidden.subscribe((data) =>
+        localStorage.setItem('games_hidden', JSON.stringify(data)),
+    );
 </script>
 
 <style>

src/routes/GameList.svelte

@@ -1,11 +1,27 @@
+<div class="options">
+    <label class="switch icon">
+        <input type="checkbox" bind:checked={show_hidden} />
+        <span> show hidden </span>
+    </label>
+</div>
+
 <div class="games">
     {#each games as game}
+        {#if show_hidden || !$games_hidden[[game.username, game.bgg_id].join('!')]}
+            <div
+                transition:slide={{ delay: 250, duration: 300 }}
+                class:hidden={$games_hidden[
+                    [game.username, game.bgg_id].join('!')
+                ]}>
                 <div class="grid top-align">
                     <a
                         class="s12 m2"
                         target="_blank"
                         href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
-                <img loading="lazy" src={game.thumbnail} height="80" /></a>
+                        <img
+                            loading="lazy"
+                            src={game.thumbnail}
+                            height="80" /></a>
                     <div class="grid s12 m10">
                         <div class="s8 left-align">
                             <strong>
@@ -35,22 +51,49 @@
                         <div class="s1 right-align">
                             {game.price ? '$' + game.price : ''}
                         </div>
-                <div class="notes s8">{game.notes}</div>
-                {#if game.updated_at}
-                    <div class="s4 updated-at">
-                        {pretty_date(game.updated_at)}
+                        <div class="notes s8">
+                            {game.notes}
                         </div>
+                        <div class="s3 updated-at">
+                            {#if game.updated_at}
+                                {pretty_date(game.updated_at)}
                             {/if}
                         </div>
+                        <div class="s1">
+                            <div>
+                                <button
+                                    class="transparent round"
+                                    title="hide game"
+                                    on:click={() =>
+                                        toggle_game_visibility(
+                                            game.username,
+                                            game.bgg_id,
+                                        )}
+                                    >{#if $games_hidden[[game.username, game.bgg_id].join('!')]}<i
+                                            >visibility_off</i
+                                        >{:else}
+                                        <i>visibility</i>
+                                    {/if}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
                 <div class="medium-divider"></div>
+            </div>
+        {/if}
     {/each}
 </div>
 
 <script>
+    import { getContext } from 'svelte';
+    import { slide, fade } from 'svelte/transition';
+
     export let games;
     export let sellers = {};
 
+    let show_hidden = false;
+
     // add filter
     // add sort (user, game, price)
 
@@ -59,6 +102,9 @@
 
         return date.replace(/T.*/, '');
     }
+
+    const games_hidden = getContext('games_hidden');
+    const toggle_game_visibility = games_hidden.toggle;
 </script>
 
 <style>
@@ -87,4 +133,15 @@
     .neighbourhood {
         font-size: smaller;
     }
+    .hidden {
+        opacity: 60%;
+    }
+    .switch span {
+        font-size: var(--font-size-10);
+        padding-left: 1em;
+    }
+    .options {
+        display: flex;
+        flex-direction: row-reverse;
+    }
 </style>