From fd3766fc237c8edab2e9353ae5d5eec4375fdb89 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>
   );
 };