CODEX - Added modal colours for the Bells

frontend/src/melodies/MelodyComposer.jsx

@@ -55,6 +55,18 @@ function noteDotGlow(noteNumber) {
   return `hsla(${hue}, 78%, 56%, 0.45)`;
 }
 
+function noteDotColorFromSettings(noteNumber, colorPalette) {
+  const n = Number(noteNumber || 1);
+  const custom = colorPalette?.[n - 1];
+  return custom || noteDotColor(n);
+}
+
+function noteDotGlowFromSettings(noteNumber, colorPalette) {
+  const n = Number(noteNumber || 1);
+  const custom = colorPalette?.[n - 1];
+  return custom ? `${custom}66` : noteDotGlow(n);
+}
+
 function playStep(audioCtx, stepValue, noteDurationMs) {
   if (!audioCtx) return;
 
@@ -101,6 +113,7 @@ export default function MelodyComposer() {
   const [deployPid, setDeployPid] = useState("");
   const [deployError, setDeployError] = useState("");
   const [deploying, setDeploying] = useState(false);
+  const [noteColors, setNoteColors] = useState([]);
 
   const audioCtxRef = useRef(null);
   const playbackRef = useRef(null);
@@ -181,6 +194,19 @@ export default function MelodyComposer() {
     };
   }, [stopPlayback]);
 
+  useEffect(() => {
+    let canceled = false;
+    api.get("/settings/melody")
+      .then((s) => {
+        if (canceled) return;
+        setNoteColors((s?.note_assignment_colors || []).slice(0, 16));
+      })
+      .catch(() => {
+        if (!canceled) setNoteColors([]);
+      });
+    return () => { canceled = true; };
+  }, []);
+
   const toggleCell = (noteIndex, stepIndex) => {
     const bit = 1 << noteIndex;
     setSteps((prev) => {
@@ -560,10 +586,10 @@ export default function MelodyComposer() {
                               width: "54%",
                               height: "54%",
                               borderRadius: "9999px",
-                              backgroundColor: noteDotColor(noteIndex + 1),
+                              backgroundColor: noteDotColorFromSettings(noteIndex + 1, noteColors),
                               opacity: enabled ? 1 : 0,
                               transform: enabled ? "scale(1)" : "scale(0.4)",
-                              boxShadow: enabled ? `0 0 10px 3px ${noteDotGlow(noteIndex + 1)}` : "none",
+                              boxShadow: enabled ? `0 0 10px 3px ${noteDotGlowFromSettings(noteIndex + 1, noteColors)}` : "none",
                               transition: "opacity 140ms ease, transform 140ms ease, box-shadow 180ms ease",
                             }}
                           />