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

web/src/routes/dashboard/+page.svelte

@@ -2,7 +2,7 @@
     import {Separator} from '$lib/components/ui/separator/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
-	import RecommendedShowsCarousel from '$lib/components/recommended-shows-carousel.svelte';
+	import RecommendedMediaCarousel from '$lib/components/recommended-media-carousel.svelte';
 	import LoadingBar from '$lib/components/loading-bar.svelte';
     import {base} from '$app/paths';
     import {page} from '$app/state';
@@ -11,11 +11,15 @@
 	import {env} from "$env/dynamic/public";
 
 	const apiUrl = env.PUBLIC_API_URL;
+
 	let recommendedShows: any[] = [];
-	let loading = true;
+	let showsLoading = true;
+
+	let recommendedMovies: any[] = [];
+	let moviesLoading = true;
 
 	onMount(async () => {
-		const res = await fetch(apiUrl + '/tv/recommended', {
+		const showsRes = await fetch(apiUrl + '/tv/recommended', {
 			headers: {
 				'Content-Type': 'application/json',
 				'Accept': 'application/json',
@@ -23,8 +27,22 @@
 			credentials: 'include',
 			method: 'GET'
 		});
-		recommendedShows = await res.json();
-		loading = false;
+		recommendedShows = await showsRes.json();
+		showsLoading = false
+
+		const moviesRes = await fetch(apiUrl + '/movies/recommended', {
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+			},
+			credentials: 'include',
+			method: 'GET'
+		});
+		recommendedMovies = await moviesRes.json();
+		moviesLoading = false;
+
+
+
 	});
 
 </script>
@@ -57,11 +75,19 @@
 			<h3 class="my-4 text-center text-2xl font-semibold ">
 				Trending Shows
 			</h3>
-			{#if loading}
+			{#if showsLoading}
 				<LoadingBar/>
 			{:else}
+				<RecommendedMediaCarousel isShow={true} media={recommendedShows}/>
+			{/if}
 
-				<RecommendedShowsCarousel shows={recommendedShows}/>
+			<h3 class="my-4 text-center text-2xl font-semibold ">
+				Trending Movies
+			</h3>
+			{#if showsLoading}
+				<LoadingBar/>
+			{:else}
+				<RecommendedMediaCarousel isShow={false} media={recommendedMovies}/>
 			{/if}
 		</div>
 	</div>

web/src/routes/dashboard/tv/add-show/+page.svelte

@@ -10,45 +10,49 @@
 	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
 	import type {MetaDataProviderShowSearchResult} from '$lib/types.js';
 	import * as RadioGroup from '$lib/components/ui/radio-group/index.js';
-	import AddShowCard from '$lib/components/add-show-card.svelte';
+	import AddMediaCard from '$lib/components/add-media-card.svelte';
 	import {toast} from 'svelte-sonner';
+	import {onMount} from "svelte";
 
 	const apiUrl = env.PUBLIC_API_URL;
 	let searchTerm: string = $state('');
 	let metadataProvider: string = $state('tmdb');
 	let results: MetaDataProviderShowSearchResult[] | null = $state(null);
-
+	onMount(search)
 	async function search() {
+		let url = new URL(apiUrl + '/tv/recommended');
 		if (searchTerm.length > 0) {
 			let url = new URL(apiUrl + '/tv/search');
 			url.searchParams.append('query', searchTerm);
 			url.searchParams.append('metadata_provider', metadataProvider);
 			toast.info(`Searching for "${searchTerm}" using ${metadataProvider.toUpperCase()}...`);
-			try {
-				const response = await fetch(url, {
-					method: 'GET',
-					credentials: 'include'
-				});
-				if (!response.ok) {
-					const errorText = await response.text();
-					throw new Error(`Search failed: ${response.status} ${errorText || response.statusText}`);
-				}
-				results = await response.json();
-				if (results && results.length > 0) {
-					toast.success(`Found ${results.length} result(s) for "${searchTerm}".`);
-				} else {
-					toast.info(`No results found for "${searchTerm}".`);
-				}
-			} catch (error) {
-				const errorMessage =
-						error instanceof Error ? error.message : 'An unknown error occurred during search.';
-				console.error('Search error:', error);
-				toast.error(errorMessage);
-				results = null; // Clear previous results on error
+
+		}
+
+		try {
+			const response = await fetch(url, {
+				method: 'GET',
+				credentials: 'include'
+			});
+			if (!response.ok) {
+				const errorText = await response.text();
+				throw new Error(`Search failed: ${response.status} ${errorText || response.statusText}`);
 			}
-		} else {
-			toast.warning('Please enter a search term.');
-			results = null;
+			results = await response.json();
+			if (searchTerm.length === 0) {
+				return
+			}
+			if (results && results.length > 0) {
+				toast.success(`Found ${results.length} result(s) for "${searchTerm}".`);
+			} else {
+				toast.info(`No results found for "${searchTerm}".`);
+			}
+		} catch (error) {
+			const errorMessage =
+					error instanceof Error ? error.message : 'An unknown error occurred during search.';
+			console.error('Search error:', error);
+			toast.error(errorMessage);
+			results = null; // Clear previous results on error
 		}
 	}
 </script>
@@ -131,7 +135,7 @@
              md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
 			>
 				{#each results as result}
-					<AddShowCard {result}/>
+					<AddMediaCard {result}/>
 				{/each}
 			</div>
 		{/if}