Simplify buttons on game page and reactive button text.

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["kickstarter", "msrp"]
+	"cSpell.words": ["iconify", "kickstarter", "msrp"]
 }

package.json

@@ -13,6 +13,7 @@
     "format": "prettier --write --plugin-search-dir=. ."
   },
   "devDependencies": {
+    "@iconify/svelte": "^3.0.1",
     "@playwright/test": "^1.29.2",
     "@rgossiaux/svelte-headlessui": "1.0.2",
     "@rgossiaux/svelte-heroicons": "^0.1.2",

pnpm-lock.yaml

@@ -2,6 +2,7 @@ lockfileVersion: 5.4
 
 specifiers:
   '@fontsource/fira-mono': ^4.5.10
+  '@iconify/svelte': ^3.0.1
   '@leveluptuts/svelte-side-menu': ^1.0.5
   '@leveluptuts/svelte-toy': ^2.0.3
   '@lukeed/uuid': ^2.0.0
@@ -61,6 +62,7 @@ dependencies:
   zod-to-json-schema: 3.20.2_zod@3.20.2
 
 devDependencies:
+  '@iconify/svelte': 3.0.1_svelte@3.55.1
   '@playwright/test': 1.29.2
   '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.55.1
   '@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.55.1
@@ -362,9 +364,17 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify/svelte/3.0.1_svelte@3.55.1:
+    resolution: {integrity: sha512-onjjl496hTXUBWJxeCxo/c5zmVHS3HnKUQv5Cqf1ZsUbY4d0wVJfSDaV1hw1m6b0BNlJCOmbpc23Q6AOO5qqKg==}
+    peerDependencies:
+      svelte: '>=3'
+    dependencies:
+      '@iconify/types': 2.0.0
+      svelte: 3.55.1
+    dev: true
+
   /@iconify/types/2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
-    dev: false
 
   /@jridgewell/resolve-uri/3.1.0:
     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}

src/routes/+layout.svelte

@@ -4,7 +4,7 @@
 	import debounce from 'just-debounce-it';
 	import clone from 'just-clone';
 	import { Toy } from '@leveluptuts/svelte-toy';
-	import 'iconify-icon';
+	// import 'iconify-icon';
 	// import '../app.postcss';
 	import Analytics from '$lib/components/analytics.svelte';
 	import Header from '$lib/components/header/Header.svelte';

src/routes/game/[id]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { fade, fly } from 'svelte/transition';
 	import { Image } from 'svelte-lazy-loader';
+	import Icon from '@iconify/svelte';
 	import {
   ChevronRightIcon,
 		ExternalLinkIcon,
@@ -24,6 +25,8 @@
 
 	$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
 	$: existsInWishlist = $wishlistStore.find((item: SavedGameType) => item.id === game.id);
+	$: collectionText = existsInCollection ? 'Remove from collection' : 'Add to collection';
+	$: wishlistText = existsInWishlist ? 'Remove from wishlist' : 'Add to wishlist';
 
 	export let data: PageData;
 	let game: GameType;
@@ -37,6 +40,28 @@
 		firstParagraphEnd = game?.description?.indexOf('</ p>') + 5;
 	}
 
+	function onCollectionClick() {	
+		if (existsInCollection) {
+			removeFromCollection();
+		} else {
+			addToCollection(game);
+			if (browser) {
+				localStorage.collection = JSON.stringify($collectionStore);
+			}
+		}
+	}
+
+	function onWishlistClick() {
+		if (existsInWishlist) {
+			removeFromWishList();
+		} else {
+			addToWishlist(game);
+			if (browser) {
+				localStorage.wishlist = JSON.stringify($wishlistStore);
+			}
+		}
+	}
+
 	function removeFromCollection() {
 		boredState.update((n) => ({
 			...n,
@@ -87,44 +112,22 @@
 			</LinkWithIcon>
 		</div>
 		<div style="display: grid; gap: 1.5rem; place-content: center;">
+		<Button size="md" kind={existsInCollection ? 'danger' : 'primary'} icon on:click={onCollectionClick}>
+			{collectionText}
 			{#if existsInCollection}
-				<Button size="md" kind="danger" icon on:click={() => removeFromCollection()}>
+				<Icon icon="line-md:minus-circle" width="24" height="24" />
-					Remove from collection <iconify-icon icon="line-md:minus-circle" width="24" height="24"></iconify-icon>
-				</Button>
 			{:else}
-				<Button
+				<Icon icon="line-md:plus-circle" width="24" height="24" />
-					size="md"
-					kind="primary"
-					icon
-					on:click={() => {
-						addToCollection(game);
-						if (browser) {
-							localStorage.collection = JSON.stringify($collectionStore);
-						}
-					}}
-				>
-					Add to collection <iconify-icon icon="line-md:plus-circle" width="24" height="24"></iconify-icon>
-				</Button>
 			{/if}
+		</Button>
+		<Button size="md" kind={existsInWishlist ? 'danger' : 'primary'} icon on:click={onWishlistClick}>
+			{wishlistText}
 			{#if existsInWishlist}
-				<Button size="md" kind="danger" icon on:click={() => removeFromWishList()}>
+				<Icon icon="line-md:minus-circle" width="24" height="24" />
-					Remove from wishlist <iconify-icon icon="line-md:minus-circle" width="24" height="24"></iconify-icon>
-				</Button>
 			{:else}
-				<Button
+				<Icon icon="line-md:plus-circle" width="24" height="24" />
-					size="md"
-					kind="primary"
-					icon
-					on:click={() => {
-						addToWishlist(game);
-						if (browser) {
-							localStorage.wishlist = JSON.stringify($wishlistStore);
-						}
-					}}
-				>
-					Add to wishlist n <iconify-icon icon="line-md:plus-circle" width="24" height="24"></iconify-icon>
-				</Button>
 			{/if}
+		</Button>
 		</div>
 	</div>
 </section>
@@ -208,7 +211,7 @@
 		grid-template-columns: 1fr 1fr;
 		gap: 0.5rem;
 		place-content: center;
-		a, p {
+		p {
 			margin: 1rem;
 		}