add toggle for single/multiple home feature carousel (#1581) (#1412)

src/renderer/features/home/routes/home-route.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useGridCarouselContainerQuery } from '/@/renderer/components/grid-carousel/grid-carousel-v2';
 import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/native-scroll-area';
 import { AlbumInfiniteCarousel } from '/@/renderer/features/albums/components/album-infinite-carousel';
+import { AlbumInfiniteFeatureCarousel } from '/@/renderer/features/home/components/album-infinite-feature-carousel';
 import { AlbumInfiniteSingleFeatureCarousel } from '/@/renderer/features/home/components/album-infinite-single-feature-carousel';
 import { FeaturedGenres } from '/@/renderer/features/home/components/featured-genres';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
@@ -12,9 +13,11 @@ import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library
 import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { SongInfiniteCarousel } from '/@/renderer/features/songs/components/song-infinite-carousel';
 import {
+    HomeFeatureStyle,
     HomeItem,
     useCurrentServer,
     useHomeFeature,
+    useHomeFeatureStyle,
     useHomeItems,
     useWindowSettings,
 } from '/@/renderer/store';
@@ -35,6 +38,7 @@ const HomeRoute = () => {
     const server = useCurrentServer();
     const { windowBarStyle } = useWindowSettings();
     const homeFeature = useHomeFeature();
+    const homeFeatureStyle = useHomeFeatureStyle();
     const homeItems = useHomeItems();
     const containerQuery = useGridCarouselContainerQuery();
 
@@ -116,7 +120,12 @@ const HomeRoute = () => {
                         px="2rem"
                         ref={containerQuery.ref}
                     >
-                        {homeFeature && <AlbumInfiniteSingleFeatureCarousel />}
+                        {homeFeature && homeFeatureStyle === HomeFeatureStyle.SINGLE && (
+                            <AlbumInfiniteSingleFeatureCarousel />
+                        )}
+                        {homeFeature && homeFeatureStyle === HomeFeatureStyle.MULTIPLE && (
+                            <AlbumInfiniteFeatureCarousel />
+                        )}
                         {sortedItems.map((item) => {
                             if (item.id === HomeItem.GENRES) {
                                 return <FeaturedGenres key="featured-genres" />;