add genres to home route configuration

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