improve handlers for artist / sidebar configuration

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

@@ -1,5 +1,12 @@
+import { useMemo } from 'react';
+
 import { DraggableItems } from '/@/renderer/features/settings/components/general/draggable-items';
-import { ArtistItem, useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
+import {
+    ArtistItem,
+    SortableItem,
+    useGeneralSettings,
+    useSettingsStoreActions,
+} from '/@/renderer/store';
 
 const ARTIST_ITEMS: Array<[ArtistItem, string]> = [
     [ArtistItem.BIOGRAPHY, 'table.column.biography'],
@@ -13,17 +20,48 @@ export const ArtistSettings = () => {
     const { artistItems } = useGeneralSettings();
     const { setArtistItems } = useSettingsStoreActions();
 
-    const mappedArtistItems = artistItems.map((item) => ({
-        ...item,
-        id: item.id as ArtistItem,
-    }));
+    const mergedArtistItems = useMemo(() => {
+        const settingsMap = new Map(
+            artistItems.map((item) => [item.id, item as SortableItem<ArtistItem>]),
+        );
+
+        const merged = ARTIST_ITEMS.map(([itemId]) => {
+            const artistItemId = itemId as ArtistItem;
+            const existing = settingsMap.get(artistItemId);
+            if (existing) {
+                return {
+                    ...existing,
+                    id: artistItemId,
+                };
+            }
+
+            // Item not in settings, add it as disabled
+            return {
+                disabled: true,
+                id: artistItemId,
+            };
+        });
+
+        // Add any items from settings that aren't in ARTIST_ITEMS (for backwards compatibility)
+        artistItems.forEach((item) => {
+            const existsInArtistItems = ARTIST_ITEMS.some(([itemId]) => itemId === item.id);
+            if (!existsInArtistItems) {
+                merged.push({
+                    ...item,
+                    id: item.id as ArtistItem,
+                });
+            }
+        });
+
+        return merged;
+    }, [artistItems]);
 
     return (
         <DraggableItems
             description="setting.artistConfiguration"
             itemLabels={ARTIST_ITEMS}
             setItems={setArtistItems}
-            settings={mappedArtistItems}
+            settings={mergedArtistItems}
             title="setting.artistConfiguration"
         />
     );

src/renderer/features/settings/components/general/sidebar-reorder.tsx

@@ -1,16 +1,23 @@
+import { useMemo } from 'react';
+
 import { DraggableItems } from '/@/renderer/features/settings/components/general/draggable-items';
-import { useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store';
+import {
+    sidebarItems as defaultSidebarItems,
+    useGeneralSettings,
+    useSettingsStoreActions,
+} from '/@/renderer/store';
 
 const SIDEBAR_ITEMS: Array<[string, string]> = [
     ['Albums', 'page.sidebar.albums'],
     ['Artists', 'page.sidebar.albumArtists'],
     ['Artists-all', 'page.sidebar.artists'],
+    ['Favorites', 'page.sidebar.favorites'],
+    ['Folders', 'page.sidebar.folders'],
     ['Genres', 'page.sidebar.genres'],
     ['Home', 'page.sidebar.home'],
     ['Now Playing', 'page.sidebar.nowPlaying'],
     ['Playlists', 'page.sidebar.playlists'],
     ['Search', 'page.sidebar.search'],
-    ['Favorites', 'page.sidebar.favorites'],
     ['Settings', 'page.sidebar.settings'],
     ['Tracks', 'page.sidebar.tracks'],
 ];
@@ -19,12 +26,49 @@ export const SidebarReorder = () => {
     const { sidebarItems } = useGeneralSettings();
     const { setSidebarItems } = useSettingsStoreActions();
 
+    const mergedSidebarItems = useMemo(() => {
+        const settingsMap = new Map(sidebarItems.map((item) => [item.id, item]));
+        const defaultMap = new Map(defaultSidebarItems.map((item) => [item.id, item]));
+
+        const merged = SIDEBAR_ITEMS.map(([itemId]) => {
+            const existing = settingsMap.get(itemId);
+            if (existing) {
+                return {
+                    ...existing,
+                    id: itemId,
+                };
+            }
+
+            // Item not in settings, get default values and add it as disabled
+            const defaultItem = defaultMap.get(itemId);
+            return {
+                disabled: true,
+                id: itemId,
+                label: defaultItem?.label ?? itemId,
+                route: defaultItem?.route ?? '',
+            };
+        });
+
+        // Add any items from settings that aren't in SIDEBAR_ITEMS (for backwards compatibility)
+        sidebarItems.forEach((item) => {
+            const existsInSidebarItems = SIDEBAR_ITEMS.some(([itemId]) => itemId === item.id);
+            if (!existsInSidebarItems) {
+                merged.push({
+                    ...item,
+                    id: item.id,
+                });
+            }
+        });
+
+        return merged;
+    }, [sidebarItems]);
+
     return (
         <DraggableItems
             description="setting.sidebarCollapsedNavigation"
             itemLabels={SIDEBAR_ITEMS}
             setItems={setSidebarItems}
-            settings={sidebarItems}
+            settings={mergedSidebarItems}
             title="setting.sidebarConfiguration"
         />
     );