add movies carousel to dashboard and fixing movies routes in the backend, making the components more generic and reusable

web/src/lib/components/add-media-card.svelte

@@ -10,12 +10,12 @@
 	const apiUrl = env.PUBLIC_API_URL;
 	let loading = $state(false);
 	let errorMessage = $state(null);
-	let {result}: { result: MetaDataProviderShowSearchResult } = $props();
+	let {result, isShow = true}: { result: MetaDataProviderShowSearchResult, isShow: boolean } = $props();
 	console.log('Add Show Card Result: ', result);
 
-	async function addShow() {
+	async function addMedia() {
 		loading = true;
-		let url = new URL(apiUrl + '/tv/shows');
+		let url = isShow ? new URL(apiUrl + '/tv/shows') : new URL(apiUrl + '/movies');
 		url.searchParams.append('show_id', String(result.external_id));
 		url.searchParams.append('metadata_provider', result.metadata_provider);
 		const response = await fetch(url, {
@@ -25,7 +25,7 @@
 		let responseData = await response.json();
 		console.log('Added Show: Response Data: ', responseData);
 		if (response.ok) {
-			await goto(base + '/dashboard/tv/' + responseData.id);
+			await goto(`${base}/dashboard/${isShow ? 'tv' : 'movies'}/` + responseData.id);
 		} else {
 			errorMessage = 'Error occurred: ' + responseData;
 		}
@@ -62,12 +62,12 @@
 		<Button
 				class="w-full font-semibold"
 				disabled={result.added || loading}
-				onclick={() => addShow(result)}
+				onclick={() => addMedia(result)}
 		>
 			{#if loading}
 				<span class="animate-pulse">Loading...</span>
 			{:else}
-				{result.added ? 'Show already exists' : 'Add Show'}
+				{result.added ? 'Show already exists' : `Add ${isShow ? 'Show' : 'Movie'}`}
 			{/if}
 		</Button>
 		<div class="flex w-full items-center gap-2">

web/src/lib/components/recommended-media-carousel.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import Autoplay from 'embla-carousel-autoplay';
+    import * as Carousel from '$lib/components/ui/carousel/index.js';
+    import type {MetaDataProviderShowSearchResult} from '$lib/types';
+    import AddMediaCard from '$lib/components/add-media-card.svelte';
+
+    let {media, isShow}: { media: MetaDataProviderShowSearchResult[], isShow: boolean } = $props();
+</script>
+
+<div class="grid w-full gap-4 sm:grid-cols-1
+     md:grid-cols-2 lg:grid-cols-3">
+    {#each media.slice(0, 3) as mediaItem}
+        <AddMediaCard isShow={isShow} result={mediaItem}/>
+    {/each}
+</div>
+

web/src/lib/components/recommended-shows-carousel.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-    import Autoplay from 'embla-carousel-autoplay';
-    import * as Carousel from '$lib/components/ui/carousel/index.js';
-    import type {MetaDataProviderShowSearchResult} from '$lib/types';
-    import AddShowCard from '$lib/components/add-show-card.svelte';
-
-    let {shows}: { shows: MetaDataProviderShowSearchResult } = $props();
-</script>
-
-<Carousel.Root
-        opts={{
-		align: 'start',
-		loop: true
-	}}
-        class="max-w-[80vw]"
-        plugins={[
-		Autoplay({
-			delay: 5000,
-			stopOnInteraction: false,
-			stopOnMouseEnter: true,
-			playOnInit: true,
-			stopOnFocusIn: true
-		})
-	]}
->
-
-    <Carousel.Content>
-        {#each shows as show}
-            <Carousel.Item class="md:basis-1/2 md:max-w-[40vw] xl:max-w-[20vw]">
-                <AddShowCard result={show}/>
-            </Carousel.Item>
-        {/each}
-    </Carousel.Content>
-    <Carousel.Previous/>
-    <Carousel.Next/>
-</Carousel.Root>