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

src/i18n/locales/en.json

@@ -796,6 +796,10 @@
         "homeConfiguration": "home page configuration",
         "homeFeature_description": "controls whether to show the large featured carousel on the home page",
         "homeFeature": "home featured carousel",
+        "homeFeatureStyle_description": "controls the style of the home featured carousel",
+        "homeFeatureStyle": "home featured carousel style",
+        "homeFeatureStyle_optionMultiple": "multiple",
+        "homeFeatureStyle_optionSingle": "single",
         "hotkey_browserBack": "browser back",
         "hotkey_browserForward": "browser forward",
         "hotkey_favoriteCurrentSong": "favorite $t(common.currentSong)",

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" />;

src/renderer/features/settings/components/general/application-settings.tsx

@@ -18,6 +18,7 @@ import {
     SettingsSection,
 } from '/@/renderer/features/settings/components/settings-section';
 import {
+    HomeFeatureStyle,
     SideQueueType,
     useFontSettings,
     useGeneralSettings,
@@ -26,6 +27,7 @@ import {
 import { type Font, FONT_OPTIONS } from '/@/renderer/types/fonts';
 import { FileInput } from '/@/shared/components/file-input/file-input';
 import { NumberInput } from '/@/shared/components/number-input/number-input';
+import { SegmentedControl } from '/@/shared/components/segmented-control/segmented-control';
 import { Select } from '/@/shared/components/select/select';
 import { Slider } from '/@/shared/components/slider/slider';
 import { Switch } from '/@/shared/components/switch/switch';
@@ -37,6 +39,23 @@ const ipc = isElectron() ? window.api.ipc : null;
 // Electron 32+ removed file.path, use this which is exposed in preload to get real path
 const webUtils = isElectron() ? window.electron.webUtils : null;
 
+const HOME_FEATURE_STYLE_OPTIONS = [
+    {
+        label: t('setting.homeFeatureStyle', {
+            context: 'optionSingle',
+            postProcess: 'sentenceCase',
+        }),
+        value: HomeFeatureStyle.SINGLE,
+    },
+    {
+        label: t('setting.homeFeatureStyle', {
+            context: 'optionMultiple',
+            postProcess: 'sentenceCase',
+        }),
+        value: HomeFeatureStyle.MULTIPLE,
+    },
+];
+
 const SIDE_QUEUE_OPTIONS = [
     {
         label: t('setting.sidePlayQueueStyle', {
@@ -356,6 +375,29 @@ export const ApplicationSettings = memo(() => {
             isHidden: false,
             title: t('setting.homeFeature', { postProcess: 'sentenceCase' }),
         },
+        {
+            control: (
+                <SegmentedControl
+                    aria-label={t('setting.homeFeatureStyle', { postProcess: 'sentenceCase' })}
+                    data={HOME_FEATURE_STYLE_OPTIONS}
+                    defaultValue={settings.homeFeatureStyle}
+                    onChange={(e) =>
+                        setSettings({
+                            general: {
+                                ...settings,
+                                homeFeatureStyle: e as HomeFeatureStyle,
+                            },
+                        })
+                    }
+                />
+            ),
+            description: t('setting.homeFeature', {
+                context: 'description',
+                postProcess: 'sentenceCase',
+            }),
+            isHidden: false,
+            title: t('setting.homeFeature', { postProcess: 'sentenceCase' }),
+        },
         {
             control: (
                 <Switch

src/renderer/store/settings.store.ts

@@ -385,6 +385,11 @@ const VisualizerSettingsSchema = z.object({
     type: z.enum(['audiomotionanalyzer', 'butterchurn']),
 });
 
+export enum HomeFeatureStyle {
+    MULTIPLE = 'multiple',
+    SINGLE = 'single',
+}
+
 export const GeneralSettingsSchema = z.object({
     accent: z
         .string()
@@ -409,6 +414,7 @@ export const GeneralSettingsSchema = z.object({
     followSystemTheme: z.boolean(),
     genreTarget: GenreTargetSchema,
     homeFeature: z.boolean(),
+    homeFeatureStyle: z.nativeEnum(HomeFeatureStyle),
     homeItems: z.array(SortableItemSchema(HomeItemSchema)),
     imageRes: z.object({
         fullScreenPlayer: z.number(),
@@ -964,6 +970,7 @@ const initialState: SettingsState = {
         followSystemTheme: false,
         genreTarget: GenreTarget.TRACK,
         homeFeature: true,
+        homeFeatureStyle: HomeFeatureStyle.SINGLE,
         homeItems,
         imageRes: {
             fullScreenPlayer: 0,
@@ -2143,6 +2150,9 @@ export const useExternalLinks = () =>
 
 export const useHomeFeature = () => useSettingsStore((state) => state.general.homeFeature, shallow);
 
+export const useHomeFeatureStyle = () =>
+    useSettingsStore((state) => state.general.homeFeatureStyle);
+
 export const useHomeItems = () => useSettingsStore((state) => state.general.homeItems, shallow);
 
 export const useArtistItems = () => useSettingsStore((state) => state.general.artistItems, shallow);