From bb1d9e54faf13912e80d82061a9055303822e33f Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Fri, 8 Jul 2022 13:24:25 +0200
Subject: [PATCH 1/2] refactor: separate podcast grid and cards

---
 src/ui/PodcastView/PodcastGrid.svelte     | 22 +++----------
 src/ui/PodcastView/PodcastGridCard.svelte | 38 +++++++++++++++++++++++
 2 files changed, 42 insertions(+), 18 deletions(-)
 create mode 100644 src/ui/PodcastView/PodcastGridCard.svelte

diff --git a/src/ui/PodcastView/PodcastGrid.svelte b/src/ui/PodcastView/PodcastGrid.svelte
index 9c44efde..79cf3165 100644
--- a/src/ui/PodcastView/PodcastGrid.svelte
+++ b/src/ui/PodcastView/PodcastGrid.svelte
@@ -1,25 +1,16 @@
 <script lang="ts">
 	import { PodcastFeed } from "src/types/PodcastFeed";
-	import { createEventDispatcher } from "svelte";
+	import PodcastGridCard from "./PodcastGridCard.svelte";
 
 	export let feeds: PodcastFeed[] = [];
-
-	const dispatch = createEventDispatcher();
-
-	function onclickPodcast(feed: PodcastFeed) {
-		dispatch("clickPodcast", { feed });
-	}
 </script>
 
 <div class="podcast-grid">
 	{#if feeds.length > 0}
 		{#each feeds as feed}
-			<img
-				id={feed.title}
-				src={feed.artworkUrl}
-				alt={feed.title}
-				on:click={onclickPodcast.bind(null, feed)}
-				class="podcast-image"
+			<PodcastGridCard
+				feed={feed}
+				on:clickPodcast
 			/>
 		{/each}
 	{:else}
@@ -30,11 +21,6 @@
 </div>
 
 <style>
-	.podcast-image {
-		width: 100%;
-		cursor: pointer !important;
-	}
-
 	.podcast-grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
diff --git a/src/ui/PodcastView/PodcastGridCard.svelte b/src/ui/PodcastView/PodcastGridCard.svelte
new file mode 100644
index 00000000..12faf314
--- /dev/null
+++ b/src/ui/PodcastView/PodcastGridCard.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { PodcastFeed } from "src/types/PodcastFeed";
+	import { createEventDispatcher } from "svelte";
+
+	export let feed: PodcastFeed;
+
+	const dispatch = createEventDispatcher();
+
+	function onclickPodcast(feed: PodcastFeed) {
+		dispatch("clickPodcast", { feed });
+	}
+</script>
+
+<img
+    id={feed.title}
+    src={feed.artworkUrl}
+    alt={feed.title}
+    on:click={onclickPodcast.bind(null, feed)}
+    class={`podcast-image`}
+/>
+
+<style>
+	.hover-container {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.podcast-image {
+		width: 100%;
+		cursor: pointer !important;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+</style>

From 8a9cdc2c2e1dc8a6cc31194344c943a26902eccb Mon Sep 17 00:00:00 2001
From: Christian Bager Bach Houmann <christian@bagerbach.com>
Date: Fri, 8 Jul 2022 13:41:37 +0200
Subject: [PATCH 2/2] feat: add ability remove podcasts

---
 src/ui/settings/PodcastQueryGrid.svelte  | 18 ++++++++++++----
 src/ui/settings/PodcastResultCard.svelte | 27 +++++++++++++++---------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/ui/settings/PodcastQueryGrid.svelte b/src/ui/settings/PodcastQueryGrid.svelte
index b8eed73e..f80809d2 100644
--- a/src/ui/settings/PodcastQueryGrid.svelte
+++ b/src/ui/settings/PodcastQueryGrid.svelte
@@ -21,9 +21,7 @@
 
     onMount(() => {
         const debouncedUpdate = debounce(async (value: string) => {
-            searchResults = await (await consume(value)).filter(
-                (feed: PodcastFeed) => !$savedFeeds[feed.title]
-            );
+            searchResults = await consume(value);
         }, 300, true);
 
         const textInput = new TextComponent(inputRef)
@@ -39,6 +37,16 @@
 
         savedFeeds.update(feeds => ({ ...feeds, [podcast.title]: podcast }));
     }
+
+    function removePodcast(event: CustomEvent<{ podcast: PodcastFeed }>) {
+        const { podcast } = event.detail;
+
+        savedFeeds.update(feeds => {
+            const newFeeds = { ...feeds };
+            delete newFeeds[podcast.title];
+            return newFeeds;
+        });
+    }
 </script>
 
 <div class="podcast-query-container">
@@ -54,7 +62,9 @@
         {#each searchResults as podcast}
             <PodcastResultCard 
                 podcast={podcast} 
-                on:addPodcast={addPodcast}    
+                isSaved={$savedFeeds[podcast.title] !== undefined}
+                on:addPodcast={addPodcast}
+                on:removePodcast={removePodcast}
             />
         {/each}
     </div>
diff --git a/src/ui/settings/PodcastResultCard.svelte b/src/ui/settings/PodcastResultCard.svelte
index ad41327c..fa0f0d4f 100644
--- a/src/ui/settings/PodcastResultCard.svelte
+++ b/src/ui/settings/PodcastResultCard.svelte
@@ -3,15 +3,17 @@
     import { createEventDispatcher } from "svelte";
 
     export let podcast: PodcastFeed;
-    let wasAdded: boolean = false;
+    export let isSaved: boolean = false;
 
     const dispatch = createEventDispatcher();
 
     function onClickAddPodcast() {
         dispatch("addPodcast", { podcast });
-        wasAdded = true;
     }
 
+    function onClickRemovePodcast() {
+        dispatch("removePodcast", { podcast });
+    }
 </script>
 
 <div class="podcast-query-card">
@@ -21,13 +23,14 @@
     
     <h4 class="podcast-query-heading">{podcast.title}</h4>
 
-    <button 
-        class="podcast-query-button" 
-        disabled={wasAdded}
-        on:click={onClickAddPodcast}
-    >
-        {wasAdded ? "Added" : "Add"}
-    </button>
+    <div class="podcast-query-button-container">
+        <button 
+            class={`${isSaved && "mod-warning"} podcast-query-button`}
+            on:click={isSaved ? onClickRemovePodcast : onClickAddPodcast}
+        >
+            {isSaved ? "Remove" : "Add"}
+        </button>
+    </div>
 </div>
 
 <style>
@@ -51,7 +54,11 @@
         text-align: center;
     }
 
-    .podcast-query-button {
+    .podcast-query-button-container {
         margin-top: auto;
     }
+
+    .podcast-query-button {
+        cursor: pointer !important;
+    }
 </style>
\ No newline at end of file