Fix localstorage query.

src/lib/components/game/index.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
-  import { ToastType, type GameType } from '$lib/types';
+  import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
+  import { ToastType, type GameType, type SavedGameType } from '$lib/types';
   import { collectionStore } from '$lib/stores/collectionStore';
   import { toast } from '$lib/components/toast/toast';
   import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
 
   export let game: GameType;
   export let detailed: boolean = false;
-  $: existsInCollection = $collectionStore.find((item: GameType) => item.id === game.id);
+  $: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
 </script>
 
 <article class="game-container" transition:fade>
@@ -29,12 +30,12 @@
     {/if}
   </div>
   {#if existsInCollection}
-    <button class="btn" type="button" on:click={() => removeFromCollection(game)}
-      >Remove from collection -</button
+    <button aria-label="Remove from collection" class="btn" type="button" on:click={() => removeFromCollection(game)}
+      >Remove <MinusCircleIcon class="icon" /></button
     >
   {:else}
-    <button class="btn" type="button" on:click={() => addToCollection(game)}
-      >Add to collection +</button
+    <button aria-label="Add to collection" class="btn" type="button" on:click={() => addToCollection(game)}
+      >Add to collection <PlusCircleIcon class="icon" /></button
     >
   {/if}
 </article>
@@ -49,12 +50,20 @@
   }
 
   button {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
     width: 100%;
     border-radius: 10px;
     padding: 1rem;
     background-color: var(--color-btn-primary-active);
   }
 
+  /* :global(.icon) {
+    width: 24px;
+    height: 24px;
+  } */
+
   .game-container {
     display: flex;
     flex-wrap: wrap;

src/routes/__layout.svelte

@@ -22,7 +22,7 @@
       collectionEmpty &&
       localStorage &&
       localStorage.collection &&
-      localStorage.collection !== 0
+      localStorage.collection.length !== 0
     ) {
       const collection = JSON.parse(localStorage.collection);
       console.log('collection', collection);

src/styles/global.scss

@@ -271,4 +271,9 @@ ol {
   padding: var(--spacing-20) 0;
   background-color: var(--color-placeholder);
   border-radius: var(--radius-base);
+}
+
+.icon {
+  width: 24px;
+  height: 24px;
 }