CODEX - Added modal colours for the Bells

frontend/src/melodies/MelodySettings.jsx

@@ -7,6 +7,13 @@ import {
   normalizeColor,
 } from "./melodyUtils";
 
+const DEFAULT_NOTE_ASSIGNMENT_COLORS = [
+  "#67E8F9", "#5EEAD4", "#6EE7B7", "#86EFAC",
+  "#BEF264", "#FDE68A", "#FCD34D", "#FBBF24",
+  "#FDBA74", "#FB923C", "#F97316", "#FB7185",
+  "#F87171", "#EF4444", "#DC2626", "#B91C1C",
+];
+
 const sectionStyle = {
   backgroundColor: "var(--bg-card)",
   borderColor: "var(--border-primary)",
@@ -29,6 +36,9 @@ export default function MelodySettings() {
   const [colorToAdd, setColorToAdd] = useState(cssColorDefault);
   const [colorHexInput, setColorHexInput] = useState(cssColorDefault);
   const [durationToAdd, setDurationToAdd] = useState("");
+  const [colorModalBell, setColorModalBell] = useState(null);
+  const [modalColor, setModalColor] = useState("#67E8F9");
+  const [modalColorInput, setModalColorInput] = useState("#67E8F9");
 
   useEffect(() => {
     loadSettings();
@@ -38,7 +48,10 @@ export default function MelodySettings() {
     setLoading(true);
     try {
       const data = await api.get("/settings/melody");
-      setSettings(data);
+      setSettings({
+        ...data,
+        note_assignment_colors: (data.note_assignment_colors || DEFAULT_NOTE_ASSIGNMENT_COLORS).slice(0, 16),
+      });
     } catch (err) {
       setError(err.message);
     } finally {
@@ -128,6 +141,30 @@ export default function MelodySettings() {
     saveSettings(updated);
   };
 
+  const openNoteColorModal = (index) => {
+    const current = settings.note_assignment_colors?.[index] || DEFAULT_NOTE_ASSIGNMENT_COLORS[index];
+    setModalColor(current);
+    setModalColorInput(current);
+    setColorModalBell(index);
+  };
+
+  const applyNoteColor = () => {
+    if (colorModalBell == null) return;
+    const candidate = modalColorInput.startsWith("#") ? modalColorInput : `#${modalColorInput}`;
+    if (!/^#[0-9A-Fa-f]{6}$/.test(candidate)) return;
+    const next = [...(settings.note_assignment_colors || DEFAULT_NOTE_ASSIGNMENT_COLORS)];
+    next[colorModalBell] = candidate;
+    saveSettings({ ...settings, note_assignment_colors: next.slice(0, 16) });
+    setColorModalBell(null);
+  };
+
+  const resetNoteColor = () => {
+    if (colorModalBell == null) return;
+    const fallback = DEFAULT_NOTE_ASSIGNMENT_COLORS[colorModalBell];
+    setModalColor(fallback);
+    setModalColorInput(fallback);
+  };
+
   if (loading) {
     return <div className="text-center py-8" style={mutedStyle}>Loading...</div>;
   }
@@ -278,7 +315,115 @@ export default function MelodySettings() {
             <button type="button" onClick={addDuration} disabled={saving || !durationToAdd} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>Add</button>
           </div>
         </section>
+
+        {/* --- Note Assignment Colors --- */}
+        <section className="rounded-lg p-6 xl:col-span-2 border" style={sectionStyle}>
+          <h2 className="text-lg font-semibold mb-2" style={headingStyle}>Note Assignment Color Coding</h2>
+          <p className="text-xs mb-4" style={mutedStyle}>
+            Colors used in Composer, Playback, and View table dots. Click a bell to customize.
+          </p>
+          <div className="grid gap-3" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(86px, 1fr))" }}>
+            {Array.from({ length: 16 }, (_, idx) => {
+              const color = settings.note_assignment_colors?.[idx] || DEFAULT_NOTE_ASSIGNMENT_COLORS[idx];
+              return (
+                <button
+                  key={idx}
+                  type="button"
+                  onClick={() => openNoteColorModal(idx)}
+                  className="flex flex-col items-center gap-1.5 rounded-md py-2 border"
+                  style={{ borderColor: "var(--border-primary)", backgroundColor: "var(--bg-primary)" }}
+                  title={`Bell ${idx + 1}`}
+                >
+                  <span
+                    className="inline-flex items-center justify-center rounded-full text-xs font-semibold"
+                    style={{
+                      width: "30px",
+                      height: "30px",
+                      backgroundColor: color,
+                      color: "#111827",
+                      boxShadow: `0 0 8px 2px ${color}66`,
+                    }}
+                  >
+                    {idx + 1}
+                  </span>
+                  <span className="text-[11px] font-mono" style={{ color: "var(--text-muted)" }}>
+                    {color}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </section>
       </div>
+
+      {colorModalBell != null && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center p-4"
+          style={{ backgroundColor: "rgba(0,0,0,0.55)" }}
+          onClick={() => setColorModalBell(null)}
+        >
+          <div
+            className="w-full max-w-md rounded-lg border shadow-xl p-5"
+            style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)" }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 className="text-base font-semibold mb-1" style={headingStyle}>Bell {colorModalBell + 1} Color</h3>
+            <p className="text-xs mb-4" style={mutedStyle}>Pick a custom color for this bell number.</p>
+            <div className="flex items-center gap-3 mb-4">
+              <input
+                type="color"
+                value={modalColor}
+                onChange={(e) => { setModalColor(e.target.value); setModalColorInput(e.target.value); }}
+                className="w-14 h-10 rounded cursor-pointer border"
+                style={{ borderColor: "var(--border-primary)" }}
+              />
+              <input
+                type="text"
+                value={modalColorInput}
+                onChange={(e) => {
+                  const v = e.target.value;
+                  setModalColorInput(v);
+                  if (/^#[0-9A-Fa-f]{6}$/.test(v)) setModalColor(v);
+                }}
+                className="flex-1 px-3 py-2 rounded-md text-sm font-mono border"
+              />
+              <span
+                className="inline-flex items-center justify-center rounded-full text-xs font-semibold"
+                style={{ width: "30px", height: "30px", backgroundColor: modalColor, color: "#111827" }}
+              >
+                {colorModalBell + 1}
+              </span>
+            </div>
+            <div className="flex justify-end gap-2">
+              <button
+                type="button"
+                onClick={resetNoteColor}
+                className="px-3 py-1.5 text-sm rounded-md border"
+                style={{ borderColor: "var(--border-primary)", color: "var(--text-secondary)", backgroundColor: "var(--bg-card-hover)" }}
+              >
+                Reset
+              </button>
+              <button
+                type="button"
+                onClick={() => setColorModalBell(null)}
+                className="px-3 py-1.5 text-sm rounded-md border"
+                style={{ borderColor: "var(--border-primary)", color: "var(--text-secondary)", backgroundColor: "var(--bg-card-hover)" }}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={applyNoteColor}
+                disabled={!/^#[0-9A-Fa-f]{6}$/.test(modalColorInput.startsWith("#") ? modalColorInput : `#${modalColorInput}`)}
+                className="px-3 py-1.5 text-sm rounded-md"
+                style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
+              >
+                Save Color
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }