fix(playlists)!: show newly created playlist instantly

src/lib/components/groove/PlaylistListing.svelte

@@ -26,35 +26,6 @@
 
 	const library = getLibraryState();
 	const player = getPlayerState();
-
-	const playPlaylist: SubmitFunction = async () => {
-		return async ({ update, result }) => {
-			await update({
-				invalidateAll: false,
-				reset: false
-			});
-
-			if (result.type === 'success' && result.data) {
-				player.applyStatus(result.data);
-			}
-		};
-	};
-
-	// TODO: Refactor
-	const deletePlaylist: SubmitFunction = async ({ action }) => {
-		const playlistId = parseInt(action.pathname.split('/playlists/')[1].split('/')[0]);
-
-		return async ({ update, result }) => {
-			await update({
-				invalidateAll: false,
-				reset: false
-			});
-
-			if (result.type === 'success') {
-				library.playlists = library.playlists.filter((p) => p.id !== playlistId);
-			}
-		};
-	};
 </script>
 
 <!-- svelte-ignore a11y_interactive_supports_focus -->
@@ -79,17 +50,23 @@
 			</div>
 		</div>
 		<div class="flex w-full justify-between gap-1">
-			<form method="POST" action="/playlists/{id}?/play" use:enhance={playPlaylist}>
-				<Button type="submit" variant="outline" size="icon">
-					<Play />
-				</Button>
-			</form>
+			<Button
+				type="submit"
+				variant="outline"
+				size="icon"
+				onclick={() => player.playPlaylist(id, fetch)}
+			>
+				<Play />
+			</Button>
 
-			<form method="POST" action="/playlists/{id}?/delete" use:enhance={deletePlaylist}>
-				<Button type="submit" variant="outline" size="icon">
-					<Trash2 />
-				</Button>
-			</form>
+			<Button
+				type="submit"
+				variant="outline"
+				size="icon"
+				onclick={() => library.deletePlaylist(id, fetch)}
+			>
+				<Trash2 />
+			</Button>
 		</div>
 	</div>
 </div>