fix presets delete (#1497)

src/renderer/features/visualizer/components/audiomotionanalyzer/presets.ts

@@ -1,5 +1,8 @@
+import { nanoid } from 'nanoid';
+
 export const audiomotionanalyzerPresets = [
     {
+        id: nanoid(),
         name: 'Preset 1',
         value: {
             alphaBars: false,
@@ -52,6 +55,7 @@ export const audiomotionanalyzerPresets = [
         },
     },
     {
+        id: nanoid(),
         name: 'Preset 2',
         value: {
             alphaBars: false,
@@ -104,6 +108,7 @@ export const audiomotionanalyzerPresets = [
         },
     },
     {
+        id: nanoid(),
         name: 'Preset 3',
         value: {
             alphaBars: false,
@@ -158,6 +163,7 @@ export const audiomotionanalyzerPresets = [
         },
     },
     {
+        id: nanoid(),
         name: 'Preset 4',
         value: {
             alphaBars: false,

src/renderer/features/visualizer/components/audiomotionanalyzer/visualizer-settings-form.tsx

@@ -1,4 +1,5 @@
 import butterchurnPresets from 'butterchurn-presets';
+import { nanoid } from 'nanoid';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -390,10 +391,10 @@ const PresetSettings = () => {
     const [isPasting, setIsPasting] = useState(false);
     const [pasteValue, setPasteValue] = useState('');
 
-    const applyPreset = (presetName: null | string) => {
-        if (!presetName) return;
+    const applyPreset = (presetId: null | string) => {
+        if (!presetId) return;
 
-        const preset = visualizer.audiomotionanalyzer.presets.find((p) => p.name === presetName);
+        const preset = visualizer.audiomotionanalyzer.presets.find((p) => p.id === presetId);
 
         if (!preset) return;
 
@@ -484,7 +485,7 @@ const PresetSettings = () => {
         if (existingPreset) {
             // Update existing preset
             const updatedPresets = visualizer.audiomotionanalyzer.presets.map((p) =>
-                p.name === newPresetName.trim()
+                p.id === existingPreset.id
                     ? {
                           ...p,
                           value: getCurrentSettingsAsPresetValue(),
@@ -499,9 +500,12 @@ const PresetSettings = () => {
                     },
                 },
             });
+
+            setSelectedPreset(existingPreset.id);
         } else {
             // Add new preset
             const newPreset = {
+                id: nanoid(),
                 name: newPresetName.trim(),
                 value: getCurrentSettingsAsPresetValue(),
             };
@@ -513,11 +517,12 @@ const PresetSettings = () => {
                     },
                 },
             });
+
+            setSelectedPreset(newPreset.id);
         }
 
         setNewPresetName('');
         setIsSaving(false);
-        setSelectedPreset(newPresetName.trim());
     };
 
     const getCurrentSettingsAsPresetValue = () => {
@@ -579,12 +584,17 @@ const PresetSettings = () => {
     const handleUpdatePreset = () => {
         if (!selectedPreset || !newPresetName.trim()) return;
 
+        const selectedPresetObj = visualizer.audiomotionanalyzer.presets.find(
+            (p) => p.id === selectedPreset,
+        );
+        if (!selectedPresetObj) return;
+
         let trimmedName = newPresetName.trim();
-        const isRenaming = trimmedName !== selectedPreset;
+        const isRenaming = trimmedName !== selectedPresetObj.name;
 
         if (isRenaming) {
             const existingNames = visualizer.audiomotionanalyzer.presets
-                .filter((p) => p.name !== selectedPreset)
+                .filter((p) => p.id !== selectedPreset)
                 .map((p) => p.name);
 
             if (existingNames.includes(trimmedName)) {
@@ -600,7 +610,7 @@ const PresetSettings = () => {
         }
 
         const updatedPresets = visualizer.audiomotionanalyzer.presets.map((p) =>
-            p.name === selectedPreset
+            p.id === selectedPreset
                 ? {
                       ...p,
                       name: trimmedName,
@@ -621,14 +631,13 @@ const PresetSettings = () => {
 
         setNewPresetName('');
         setIsRenaming(false);
-        setSelectedPreset(trimmedName);
     };
 
     const handleDeletePreset = () => {
         if (!selectedPreset) return;
 
         const updatedPresets = visualizer.audiomotionanalyzer.presets.filter(
-            (p) => p.name !== selectedPreset,
+            (p) => p.id !== selectedPreset,
         );
 
         setSettings({
@@ -797,7 +806,7 @@ const PresetSettings = () => {
     const presetOptions = useMemo(() => {
         return visualizer.audiomotionanalyzer.presets.map((preset) => ({
             label: preset.name,
-            value: preset.name,
+            value: preset.id,
         }));
     }, [visualizer.audiomotionanalyzer.presets]);
 
@@ -907,8 +916,13 @@ const PresetSettings = () => {
                             <>
                                 <Button
                                     onClick={() => {
-                                        setNewPresetName(selectedPreset);
-                                        setIsRenaming(true);
+                                        const preset = visualizer.audiomotionanalyzer.presets.find(
+                                            (p) => p.id === selectedPreset,
+                                        );
+                                        if (preset) {
+                                            setNewPresetName(preset.name);
+                                            setIsRenaming(true);
+                                        }
                                     }}
                                     variant="default"
                                 >

src/renderer/store/settings.store.ts

@@ -1,5 +1,6 @@
 import isElectron from 'is-electron';
-import merge from 'lodash/merge';
+import mergeWith from 'lodash/mergeWith';
+import { nanoid } from 'nanoid';
 import { generatePath } from 'react-router';
 import { z } from 'zod';
 import { devtools, persist } from 'zustand/middleware';
@@ -51,7 +52,16 @@ const deepMergeIntoState = <T extends Record<string, any>>(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { actions, ...updatesWithoutActions } = updates as any;
 
-    merge(state, updatesWithoutActions);
+    // Use mergeWith to replace arrays instead of merging them by index
+    mergeWith(state, updatesWithoutActions, (_objValue, srcValue) => {
+        // If source value is an array, replace the entire array instead of merging
+        if (Array.isArray(srcValue)) {
+            return srcValue;
+        }
+
+        // Default merge behavior
+        return undefined;
+    });
 };
 
 const HomeItemSchema = z.enum([
@@ -331,6 +341,7 @@ const AudioMotionAnalyzerSettingsSchema = z.object({
     peakLine: z.boolean(),
     presets: z.array(
         z.object({
+            id: z.string(),
             name: z.string(),
             value: z.any(),
         }),
@@ -1928,10 +1939,29 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
                     }
                 }
 
+                if (version <= 19) {
+                    // Add IDs to presets that don't have them
+                    if (
+                        state.visualizer?.audiomotionanalyzer?.presets &&
+                        Array.isArray(state.visualizer.audiomotionanalyzer.presets)
+                    ) {
+                        state.visualizer.audiomotionanalyzer.presets =
+                            state.visualizer.audiomotionanalyzer.presets.map((preset) => {
+                                if (!preset.id) {
+                                    return {
+                                        ...preset,
+                                        id: nanoid(),
+                                    };
+                                }
+                                return preset;
+                            });
+                    }
+                }
+
                 return persistedState;
             },
             name: 'store_settings',
-            version: 19,
+            version: 20,
         },
     ),
 );