Further improve deletion after recent changes

Author: DMNerd

src/components/UI/modals/TuningPackManagerModal.jsx

@@ -112,7 +112,7 @@ function TuningPackManagerModal({
   const handleDelete = useCallback(
     (pack) => {
       if (!pack) return;
-      onDeleteRef.current?.(pack);
+      onDeleteRef.current?.(pack.raw ?? pack, pack.displayName);
     },
     [onDeleteRef],
   );
@@ -181,9 +181,11 @@ function TuningPackManagerModal({
                 </header>
                 <ul className="tv-modal__manager-list">
                   {group.packs.map((pack, index) => {
+                      const packKey =
+                      pack?.raw?.meta?.id || pack.rawName || pack.displayName;
                     return (
                       <li
-                        key={`${pack.rawName || pack.displayName}__${index}`}
+                        key={`${packKey || "pack"}__${index}`}
                         className="tv-modal__manager-item"
                       >
                         <div className="tv-modal__manager-pack">
@@ -201,7 +203,7 @@ function TuningPackManagerModal({
                           <button
                             type="button"
                             className="tv-button tv-button--icon tv-button--ghost tv-button--accent"
-                            onClick={() => handleEdit(pack.raw)}
+                            onClick={() => handleEdit(pack)}
                             aria-label={`Edit ${pack.displayName}`}
                             title="Edit"
                           >

src/hooks/useCustomTuningPacks.js

@@ -3,16 +3,18 @@ import { useToggle, useLatest, useMountedState } from "react-use";
 import { slug } from "@/lib/export/scales";
 import { withToastPromise } from "@/utils/toast";
 
-function resolvePackLabel(target) {
+function resolvePackLabel(target, fallbackDisplayName = "") {
   if (target && typeof target === "object") {
     const name = typeof target?.name === "string" ? target.name.trim() : "";
+        const displayNameFallback =
+      typeof fallbackDisplayName === "string"
+        ? fallbackDisplayName.trim()
+        : "";
     const displayName =
       typeof target?.displayName === "string"
         ? target.displayName.trim()
-        : name
-          ? ""
-          : "Untitled pack";
-    return name || displayName;
+        : displayNameFallback || (name ? "" : "Untitled pack");
+    return name || displayName || displayNameFallback;
   }
 
   if (typeof target === "string") {
@@ -125,13 +127,14 @@ export function useCustomTuningPacks({
   );
 
   const deletePack = useCallback(
-    async (target) => {
+    async (target, fallbackDisplayName = "") => {
       if (typeof deleteCustomTuningRef.current !== "function") return false;
       if (typeof target === "string" && !target.trim()) return false;
       if (!target) return false;
 
-      const label = resolvePackLabel(target) || "this tuning pack";
-      const key = slug(resolvePackKey(target));
+      const label =
+        resolvePackLabel(target, fallbackDisplayName) || "this tuning pack";
+              const key = slug(resolvePackKey(target));
 
       let ok = true;
       if (typeof confirmRef.current === "function") {

src/hooks/useTuningIO.js

@@ -347,8 +347,10 @@ export function useTuningIO({ systemId, strings, TUNINGS }) {
   const deleteCustomTuning = useCallback(
     (identifier) => {
       if (!identifier) return;
-      const existing = getExistingCustomTunings();
-      const filtered = removePackByIdentifier(existing, identifier);
+      const existing = getExistingCustomTunings().map(ensurePackHasId);
+      const normalizedIdentifier = ensurePackHasId(identifier);
+
+      const filtered = removePackByIdentifier(existing, normalizedIdentifier);
       setCustomTunings(filtered);
     },
     [getExistingCustomTunings, setCustomTunings],

src/tests/tuningIO.test.js

@@ -167,3 +167,23 @@ test("removePackByIdentifier removes only the targeted duplicate-named pack", ()
     ["pack-1", "pack-3"],
   );
 });
+
+test(
+  "removePackByIdentifier deletes the correct pack when names are empty or duplicated",
+  () => {
+    const packs = [
+      { name: "", meta: { id: "pack-a" } },
+      { name: "Duplicate", meta: { id: "pack-b" } },
+      { name: "Duplicate", meta: { id: "pack-c" } },
+      { name: "", meta: { id: "pack-d" } },
+    ];
+
+    const result = removePackByIdentifier(packs, { meta: { id: "pack-c" } });
+
+    assert.equal(result.length, 3);
+    assert.deepEqual(
+      result.map((pack) => pack.meta.id),
+      ["pack-a", "pack-b", "pack-d"],
+    );
+  },
+);