add top 10 list

src/assets/locales/en.json

@@ -1442,7 +1442,8 @@
         "genreMovies": "{{genre}} Movies",
         "genreShows": "{{genre}} Shows",
         "categoryMovies": "{{category}} Movies",
-        "categoryShows": "{{category}} Shows"
+        "categoryShows": "{{category}} Shows",
+        "top10": "Top 10"
       },
       "change": "Change",
       "more": "View more"

src/backend/metadata/traktApi.ts

@@ -303,6 +303,7 @@ export const getParamountTVShows = () => fetchFromTrakt("/paramounttv");
 // Popular content
 export const getPopularTVShows = () => fetchFromTrakt("/populartv");
 export const getPopularMovies = () => fetchFromTrakt("/popularmovies");
+export const getTop10Movies = () => fetchFromTrakt("/top10");
 
 // Discovery content used for the featured carousel
 export const getDiscoverContent = () =>

src/pages/discover/components/MediaCarousel.tsx

@@ -192,16 +192,20 @@ export function MediaCarousel({
   ]);
 
   // Fetch media using our hook
-  const { media, sectionTitle, actualContentType } = useDiscoverMedia({
+  const { media, sectionTitle, actualContentType, error, isLoading } =
-    contentType,
+    useDiscoverMedia({
-    mediaType,
+      contentType,
-    id: selectedProviderId || selectedGenreId || selectedRecommendationId,
+      mediaType,
-    fallbackType: content.fallback,
+      id: selectedProviderId || selectedGenreId || selectedRecommendationId,
-    genreName: selectedGenreName,
+      fallbackType: content.fallback,
-    providerName: selectedProviderName,
+      genreName: selectedGenreName,
-    mediaTitle: selectedRecommendationTitle,
+      providerName: selectedProviderName,
-    isCarouselView: true,
+      mediaTitle: selectedRecommendationTitle,
-  });
+      isCarouselView: true,
+    });
+
+  // Hide section if there's an error or no content (after loading is complete)
+  const shouldHide = !isLoading && (error || media.length === 0);
 
   // Find active button
   const activeButton = React.useMemo(() => {
@@ -304,6 +308,11 @@ export function MediaCarousel({
     actualContentType,
   ]);
 
+  // Hide the entire section if there's an error or no content
+  if (shouldHide) {
+    return null;
+  }
+
   return (
     <div>
       <div className="flex items-center justify-between ml-2 md:ml-8 mt-2">

src/pages/discover/discoverContent.tsx

@@ -76,6 +76,19 @@ export function DiscoverContent() {
       );
     }
 
+    // Top 10 Movies
+    carousels.push(
+      <LazyMediaCarousel
+        key="movie-top10"
+        content={{ type: "top10" }}
+        isTVShow={false}
+        carouselRefs={carouselRefs}
+        onShowDetails={handleShowDetails}
+        moreContent
+        priority={carousels.length < 2}
+      />,
+    );
+
     // Latest Releases
     carousels.push(
       <LazyMediaCarousel

src/pages/discover/hooks/useDiscoverMedia.ts

@@ -21,6 +21,7 @@ import {
   getParamountTVShows,
   getPrimeMovies,
   getPrimeTVShows,
+  getTop10Movies,
 } from "@/backend/metadata/traktApi";
 import { paginateResults } from "@/backend/metadata/traktFunctions";
 import { TMDBContentTypes } from "@/backend/metadata/types/tmdb";
@@ -481,6 +482,11 @@ export function useDiscoverMedia({
           }
           break;
 
+        case "top10":
+          data = await fetchTraktMedia(getTop10Movies);
+          setSectionTitle(t("discover.carousel.title.top10"));
+          break;
+
         case "latest":
           data = await fetchTraktMedia(getLatestReleases);
           setSectionTitle(t("discover.carousel.title.latestReleases"));

src/pages/discover/types/discover.ts

@@ -6,6 +6,7 @@ export type DiscoverContentType =
   | "latest"
   | "latest4k"
   | "latesttv"
+  | "top10"
   | "genre"
   | "provider"
   | "editorPicks"