From 4aaddd2104904cd1b0aa5cf5a698cbd594601ffb Mon Sep 17 00:00:00 2001
From: Uruk <contact@uruk.dev>
Date: Mon, 12 Jan 2026 09:37:49 +0100
Subject: [PATCH] fix: add missing React keys to streamystats sections

Resolves React warning about missing keys in list rendering by converting fragment to array with unique key props for each streamystats component.

Also wraps promoted watchlists in a View container to properly handle props spreading, preventing props from being passed through to individual watchlist sections.
---
 components/home/HomeWithCarousel.tsx          | 48 ++++++++++---------
 .../home/StreamystatsPromotedWatchlists.tsx   |  5 +-
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/components/home/HomeWithCarousel.tsx b/components/home/HomeWithCarousel.tsx
index c513294f..9bddb3f9 100644
--- a/components/home/HomeWithCarousel.tsx
+++ b/components/home/HomeWithCarousel.tsx
@@ -569,29 +569,31 @@ export const HomeWithCarousel = () => {
               settings.streamyStatsSeriesRecommendations ||
               settings.streamyStatsPromotedWatchlists;
             const streamystatsSections =
-              index === streamystatsIndex && hasStreamystatsContent ? (
-                <>
-                  {settings.streamyStatsMovieRecommendations && (
-                    <StreamystatsRecommendations
-                      title={t(
-                        "home.settings.plugins.streamystats.recommended_movies",
-                      )}
-                      type='Movie'
-                    />
-                  )}
-                  {settings.streamyStatsSeriesRecommendations && (
-                    <StreamystatsRecommendations
-                      title={t(
-                        "home.settings.plugins.streamystats.recommended_series",
-                      )}
-                      type='Series'
-                    />
-                  )}
-                  {settings.streamyStatsPromotedWatchlists && (
-                    <StreamystatsPromotedWatchlists />
-                  )}
-                </>
-              ) : null;
+              index === streamystatsIndex && hasStreamystatsContent
+                ? [
+                    settings.streamyStatsMovieRecommendations && (
+                      <StreamystatsRecommendations
+                        key='movie-recommendations'
+                        title={t(
+                          "home.settings.plugins.streamystats.recommended_movies",
+                        )}
+                        type='Movie'
+                      />
+                    ),
+                    settings.streamyStatsSeriesRecommendations && (
+                      <StreamystatsRecommendations
+                        key='series-recommendations'
+                        title={t(
+                          "home.settings.plugins.streamystats.recommended_series",
+                        )}
+                        type='Series'
+                      />
+                    ),
+                    settings.streamyStatsPromotedWatchlists && (
+                      <StreamystatsPromotedWatchlists key='promoted-watchlists' />
+                    ),
+                  ].filter(Boolean)
+                : null;
 
             if (section.type === "InfiniteScrollingCollectionList") {
               return (
diff --git a/components/home/StreamystatsPromotedWatchlists.tsx b/components/home/StreamystatsPromotedWatchlists.tsx
index 81d50675..783bed46 100644
--- a/components/home/StreamystatsPromotedWatchlists.tsx
+++ b/components/home/StreamystatsPromotedWatchlists.tsx
@@ -247,15 +247,14 @@ export const StreamystatsPromotedWatchlists: React.FC<
   }
 
   return (
-    <>
+    <View {...props}>
       {watchlists?.map((watchlist) => (
         <WatchlistSection
           key={watchlist.id}
           watchlist={watchlist}
           jellyfinServerId={jellyfinServerId!}
-          {...props}
         />
       ))}
-    </>
+    </View>
   );
 };