add genres to home route configuration

src/i18n/locales/en.json

@@ -464,6 +464,7 @@
         },
         "home": {
             "explore": "explore from your library",
+            "genres": "$t(entity.genre_other)",
             "mostPlayed": "most played",
             "newlyAdded": "newly added releases",
             "recentlyPlayed": "recently played",

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

@@ -63,17 +63,19 @@ const HomeRoute = () => {
         },
     };
 
-    const sortedCarousel = homeItems
-        .filter((item) => {
-            if (item.disabled) {
-                return false;
-            }
-            if (isJellyfin && item.id === HomeItem.RECENTLY_PLAYED) {
-                return false;
-            }
+    const sortedItems = homeItems.filter((item) => {
+        if (item.disabled) {
+            return false;
+        }
+        if (isJellyfin && item.id === HomeItem.RECENTLY_PLAYED) {
+            return false;
+        }
 
-            return true;
-        })
+        return true;
+    });
+
+    const sortedCarousel = sortedItems
+        .filter((item) => item.id !== HomeItem.GENRES)
         .map((item) => ({
             ...carousels[item.id],
             uniqueId: item.id,
@@ -103,8 +105,16 @@ const HomeRoute = () => {
                         px="2rem"
                     >
                         {homeFeature && <AlbumInfiniteFeatureCarousel />}
-                        <FeaturedGenres />
-                        {sortedCarousel.map((carousel) => {
+                        {sortedItems.map((item) => {
+                            if (item.id === HomeItem.GENRES) {
+                                return <FeaturedGenres key="featured-genres" />;
+                            }
+
+                            const carousel = sortedCarousel.find((c) => c.uniqueId === item.id);
+                            if (!carousel) {
+                                return null;
+                            }
+
                             if (carousel.itemType === LibraryItem.ALBUM) {
                                 return (
                                     <AlbumInfiniteCarousel

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

@@ -1,7 +1,15 @@
+import { useMemo } from 'react';
+
 import { DraggableItems } from '/@/renderer/features/settings/components/general/draggable-items';
-import { HomeItem, useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
+import {
+    HomeItem,
+    SortableItem,
+    useGeneralSettings,
+    useSettingsStoreActions,
+} from '/@/renderer/store';
 
 const HOME_ITEMS: Array<[string, string]> = [
+    [HomeItem.GENRES, 'page.home.genres'],
     [HomeItem.RANDOM, 'page.home.explore'],
     [HomeItem.RECENTLY_PLAYED, 'page.home.recentlyPlayed'],
     [HomeItem.RECENTLY_ADDED, 'page.home.newlyAdded'],
@@ -13,17 +21,48 @@ export const HomeSettings = () => {
     const { homeItems } = useGeneralSettings();
     const { setHomeItems } = useSettingsStoreActions();
 
-    const mappedHomeItems = homeItems.map((item) => ({
-        ...item,
-        id: item.id as HomeItem,
-    }));
+    const mergedHomeItems = useMemo(() => {
+        const settingsMap = new Map(
+            homeItems.map((item) => [item.id, item as SortableItem<HomeItem>]),
+        );
+
+        const merged = HOME_ITEMS.map(([itemId]) => {
+            const homeItemId = itemId as HomeItem;
+            const existing = settingsMap.get(homeItemId);
+            if (existing) {
+                return {
+                    ...existing,
+                    id: homeItemId,
+                };
+            }
+
+            // Item not in settings, add it as disabled
+            return {
+                disabled: true,
+                id: homeItemId,
+            };
+        });
+
+        // Add any items from settings that aren't in HOME_ITEMS (for backwards compatibility)
+        homeItems.forEach((item) => {
+            const existsInHomeItems = HOME_ITEMS.some(([itemId]) => itemId === item.id);
+            if (!existsInHomeItems) {
+                merged.push({
+                    ...item,
+                    id: item.id as HomeItem,
+                });
+            }
+        });
+
+        return merged;
+    }, [homeItems]);
 
     return (
         <DraggableItems
             description="setting.homeConfiguration"
             itemLabels={HOME_ITEMS}
             setItems={setHomeItems}
-            settings={mappedHomeItems}
+            settings={mergedHomeItems}
             title="setting.homeConfiguration"
         />
     );

src/renderer/store/settings.store.ts

@@ -40,6 +40,7 @@ type DeepPartial<T> = {
 };
 
 const HomeItemSchema = z.enum([
+    'genres',
     'mostPlayed',
     'random',
     'recentlyAdded',
@@ -456,6 +457,7 @@ export enum GenreTarget {
 }
 
 export enum HomeItem {
+    GENRES = 'genres',
     MOST_PLAYED = 'mostPlayed',
     RANDOM = 'random',
     RECENTLY_ADDED = 'recentlyAdded',
@@ -1350,10 +1352,17 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
                     });
                 }
 
+                if (version <= 13) {
+                    state.general.homeItems.push({
+                        disabled: false,
+                        id: HomeItem.GENRES,
+                    });
+                }
+
                 return persistedState;
             },
             name: 'store_settings',
-            version: 13,
+            version: 14,
         },
     ),
 );