Phase 2 UI Adjustments/Edits by bonamin

frontend/src/App.jsx

@@ -5,6 +5,7 @@ import MainLayout from "./layout/MainLayout";
 import MelodyList from "./melodies/MelodyList";
 import MelodyDetail from "./melodies/MelodyDetail";
 import MelodyForm from "./melodies/MelodyForm";
+import MelodySettings from "./melodies/MelodySettings";
 
 function ProtectedRoute({ children }) {
   const { user, loading } = useAuth();
@@ -50,6 +51,7 @@ export default function App() {
       >
         <Route index element={<DashboardPage />} />
         <Route path="melodies" element={<MelodyList />} />
+        <Route path="melodies/settings" element={<MelodySettings />} />
         <Route path="melodies/new" element={<MelodyForm />} />
         <Route path="melodies/:id" element={<MelodyDetail />} />
         <Route path="melodies/:id/edit" element={<MelodyForm />} />

frontend/src/layout/Sidebar.jsx

@@ -1,16 +1,32 @@
-import { NavLink } from "react-router-dom";
+import { useState } from "react";
+import { NavLink, useLocation } from "react-router-dom";
 import { useAuth } from "../auth/AuthContext";
 
 const navItems = [
   { to: "/", label: "Dashboard", roles: null },
-  { to: "/melodies", label: "Melodies", roles: ["superadmin", "melody_editor", "viewer"] },
+  {
+    label: "Melodies",
+    roles: ["superadmin", "melody_editor", "viewer"],
+    children: [
+      { to: "/melodies", label: "Editor" },
+      { to: "/melodies/settings", label: "Settings" },
+    ],
+  },
   { to: "/devices", label: "Devices", roles: ["superadmin", "device_manager", "viewer"] },
   { to: "/users", label: "Users", roles: ["superadmin", "user_manager", "viewer"] },
   { to: "/mqtt", label: "MQTT", roles: ["superadmin", "device_manager", "viewer"] },
 ];
 
+const linkClass = (isActive) =>
+  `block px-3 py-2 rounded-md text-sm transition-colors ${
+    isActive
+      ? "bg-gray-700 text-white"
+      : "text-gray-300 hover:bg-gray-800 hover:text-white"
+  }`;
+
 export default function Sidebar() {
   const { hasRole } = useAuth();
+  const location = useLocation();
 
   const visibleItems = navItems.filter(
     (item) => item.roles === null || hasRole(...item.roles)
@@ -20,23 +36,82 @@ export default function Sidebar() {
     <aside className="w-56 bg-gray-900 text-white min-h-screen p-4">
       <div className="text-xl font-bold mb-8 px-2">BellSystems</div>
       <nav className="space-y-1">
-        {visibleItems.map((item) => (
-          <NavLink
-            key={item.to}
-            to={item.to}
-            end={item.to === "/"}
-            className={({ isActive }) =>
-              `block px-3 py-2 rounded-md text-sm transition-colors ${
-                isActive
-                  ? "bg-gray-700 text-white"
-                  : "text-gray-300 hover:bg-gray-800 hover:text-white"
-              }`
-            }
-          >
-            {item.label}
-          </NavLink>
-        ))}
+        {visibleItems.map((item) =>
+          item.children ? (
+            <CollapsibleGroup
+              key={item.label}
+              label={item.label}
+              children={item.children}
+              currentPath={location.pathname}
+            />
+          ) : (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === "/"}
+              className={({ isActive }) => linkClass(isActive)}
+            >
+              {item.label}
+            </NavLink>
+          )
+        )}
       </nav>
     </aside>
   );
 }
+
+function CollapsibleGroup({ label, children, currentPath }) {
+  const isChildActive = children.some(
+    (child) =>
+      currentPath === child.to ||
+      (child.to !== "/" && currentPath.startsWith(child.to + "/"))
+  );
+  const [open, setOpen] = useState(isChildActive);
+
+  // Auto-expand when a child becomes active
+  const shouldBeOpen = open || isChildActive;
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setOpen(!shouldBeOpen)}
+        className={`w-full flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors ${
+          isChildActive
+            ? "text-white"
+            : "text-gray-300 hover:bg-gray-800 hover:text-white"
+        }`}
+      >
+        <span>{label}</span>
+        <svg
+          className={`w-4 h-4 transition-transform ${shouldBeOpen ? "rotate-90" : ""}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+      {shouldBeOpen && (
+        <div className="ml-3 mt-1 space-y-1">
+          {children.map((child) => (
+            <NavLink
+              key={child.to}
+              to={child.to}
+              end
+              className={({ isActive }) =>
+                `block pl-4 pr-3 py-1.5 rounded-md text-sm transition-colors ${
+                  isActive
+                    ? "bg-gray-700 text-white"
+                    : "text-gray-400 hover:bg-gray-800 hover:text-white"
+                }`
+              }
+            >
+              {child.label}
+            </NavLink>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/melodies/MelodyDetail.jsx

@@ -3,6 +3,12 @@ import { useParams, useNavigate } from "react-router-dom";
 import api from "../api/client";
 import { useAuth } from "../auth/AuthContext";
 import ConfirmDialog from "../components/ConfirmDialog";
+import {
+  getLocalizedValue,
+  getLanguageName,
+  normalizeColor,
+  formatDuration,
+} from "./melodyUtils";
 
 function Field({ label, children }) {
   return (
@@ -26,6 +32,15 @@ export default function MelodyDetail() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
   const [showDelete, setShowDelete] = useState(false);
+  const [displayLang, setDisplayLang] = useState("en");
+  const [melodySettings, setMelodySettings] = useState(null);
+
+  useEffect(() => {
+    api.get("/settings/melody").then((ms) => {
+      setMelodySettings(ms);
+      setDisplayLang(ms.primary_language || "en");
+    });
+  }, []);
 
   useEffect(() => {
     loadData();
@@ -73,9 +88,11 @@ export default function MelodyDetail() {
 
   const info = melody.information || {};
   const settings = melody.default_settings || {};
+  const languages = melodySettings?.available_languages || ["en"];
+  const displayName = getLocalizedValue(info.name, displayLang, "Untitled Melody");
 
   return (
-    <div className="max-w-3xl">
+    <div>
       <div className="flex items-center justify-between mb-6">
         <div>
           <button
@@ -84,9 +101,22 @@ export default function MelodyDetail() {
           >
             &larr; Back to Melodies
           </button>
-          <h1 className="text-2xl font-bold text-gray-900">
-            {info.name || "Untitled Melody"}
-          </h1>
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-bold text-gray-900">{displayName}</h1>
+            {languages.length > 1 && (
+              <select
+                value={displayLang}
+                onChange={(e) => setDisplayLang(e.target.value)}
+                className="text-xs px-2 py-1 border border-gray-200 rounded text-gray-500"
+              >
+                {languages.map((l) => (
+                  <option key={l} value={l}>
+                    {getLanguageName(l)}
+                  </option>
+                ))}
+              </select>
+            )}
+          </div>
         </div>
         {canEdit && (
           <div className="flex gap-2">
@@ -106,170 +136,180 @@ export default function MelodyDetail() {
         )}
       </div>
 
-      {/* Melody Information */}
-      <section className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
-        <h2 className="text-lg font-semibold text-gray-800 mb-4">
-          Melody Information
-        </h2>
-        <dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
-          <Field label="Type">
-            <span className="capitalize">{melody.type}</span>
-          </Field>
-          <Field label="Tone">
-            <span className="capitalize">{info.melodyTone}</span>
-          </Field>
-          <Field label="Total Notes">{info.totalNotes}</Field>
-          <Field label="Steps">{info.steps}</Field>
-          <Field label="Min Speed">{info.minSpeed}</Field>
-          <Field label="Max Speed">{info.maxSpeed}</Field>
-          <Field label="Color">
-            {info.color ? (
-              <span className="inline-flex items-center gap-2">
-                <span
-                  className="w-4 h-4 rounded border border-gray-300 inline-block"
-                  style={{ backgroundColor: info.color.startsWith("0x") ? `#${info.color.slice(4)}` : info.color }}
-                />
-                {info.color}
-              </span>
-            ) : (
-              "-"
-            )}
-          </Field>
-          <Field label="True Ring">
-            <span
-              className={`px-2 py-0.5 text-xs rounded-full ${
-                info.isTrueRing
-                  ? "bg-green-100 text-green-700"
-                  : "bg-gray-100 text-gray-500"
-              }`}
-            >
-              {info.isTrueRing ? "Yes" : "No"}
-            </span>
-          </Field>
-          <div className="col-span-2 md:col-span-3">
-            <Field label="Description">{info.description}</Field>
-          </div>
-          <div className="col-span-2 md:col-span-3">
-            <Field label="Notes">
-              {info.notes?.length > 0 ? info.notes.join(", ") : "-"}
-            </Field>
-          </div>
-          <div className="col-span-2 md:col-span-3">
-            <Field label="Custom Tags">
-              {info.customTags?.length > 0 ? (
-                <div className="flex flex-wrap gap-1 mt-1">
-                  {info.customTags.map((tag) => (
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+        {/* Left column */}
+        <div className="space-y-6">
+          {/* Melody Information */}
+          <section className="bg-white rounded-lg border border-gray-200 p-6">
+            <h2 className="text-lg font-semibold text-gray-800 mb-4">
+              Melody Information
+            </h2>
+            <dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
+              <Field label="Type">
+                <span className="capitalize">{melody.type}</span>
+              </Field>
+              <Field label="Tone">
+                <span className="capitalize">{info.melodyTone}</span>
+              </Field>
+              <Field label="Total Active Notes (bells)">{info.totalNotes}</Field>
+              <Field label="Steps">{info.steps}</Field>
+              <Field label="Min Speed">{info.minSpeed}</Field>
+              <Field label="Max Speed">{info.maxSpeed}</Field>
+              <Field label="Color">
+                {info.color ? (
+                  <span className="inline-flex items-center gap-2">
                     <span
-                      key={tag}
-                      className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded-full"
-                    >
-                      {tag}
-                    </span>
-                  ))}
-                </div>
-              ) : (
-                "-"
-              )}
-            </Field>
-          </div>
-        </dl>
-      </section>
-
-      {/* Default Settings */}
-      <section className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
-        <h2 className="text-lg font-semibold text-gray-800 mb-4">
-          Default Settings
-        </h2>
-        <dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
-          <Field label="Speed">{settings.speed}</Field>
-          <Field label="Duration">{settings.duration}</Field>
-          <Field label="Total Run Duration">{settings.totalRunDuration}</Field>
-          <Field label="Pause Duration">{settings.pauseDuration}</Field>
-          <Field label="Infinite Loop">
-            <span
-              className={`px-2 py-0.5 text-xs rounded-full ${
-                settings.infiniteLoop
-                  ? "bg-green-100 text-green-700"
-                  : "bg-gray-100 text-gray-500"
-              }`}
-            >
-              {settings.infiniteLoop ? "Yes" : "No"}
-            </span>
-          </Field>
-          <div className="col-span-2 md:col-span-3">
-            <Field label="Echo Ring">
-              {settings.echoRing?.length > 0
-                ? settings.echoRing.join(", ")
-                : "-"}
-            </Field>
-          </div>
-          <div className="col-span-2 md:col-span-3">
-            <Field label="Note Assignments">
-              {settings.noteAssignments?.length > 0
-                ? settings.noteAssignments.join(", ")
-                : "-"}
-            </Field>
-          </div>
-        </dl>
-      </section>
-
-      {/* Identifiers */}
-      <section className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
-        <h2 className="text-lg font-semibold text-gray-800 mb-4">
-          Identifiers
-        </h2>
-        <dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
-          <Field label="Document ID">{melody.id}</Field>
-          <Field label="UID">{melody.uid}</Field>
-          <Field label="PID">{melody.pid}</Field>
-          <div className="col-span-2 md:col-span-3">
-            <Field label="URL">{melody.url}</Field>
-          </div>
-        </dl>
-      </section>
-
-      {/* Files */}
-      <section className="bg-white rounded-lg border border-gray-200 p-6 mb-6">
-        <h2 className="text-lg font-semibold text-gray-800 mb-4">Files</h2>
-        <dl className="space-y-4">
-          <Field label="Binary File">
-            {files.binary_url ? (
-              <a
-                href={files.binary_url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 hover:text-blue-800 underline"
-              >
-                Download binary
-              </a>
-            ) : (
-              <span className="text-gray-400">Not uploaded</span>
-            )}
-          </Field>
-          <Field label="Audio Preview">
-            {files.preview_url ? (
-              <div className="space-y-1">
-                <audio controls src={files.preview_url} className="h-8" />
-                <a
-                  href={files.preview_url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-blue-600 hover:text-blue-800 underline text-xs"
+                      className="w-4 h-4 rounded border border-gray-300 inline-block"
+                      style={{ backgroundColor: normalizeColor(info.color) }}
+                    />
+                    {info.color}
+                  </span>
+                ) : (
+                  "-"
+                )}
+              </Field>
+              <Field label="True Ring">
+                <span
+                  className={`px-2 py-0.5 text-xs rounded-full ${
+                    info.isTrueRing
+                      ? "bg-green-100 text-green-700"
+                      : "bg-gray-100 text-gray-500"
+                  }`}
                 >
-                  Download preview
-                </a>
+                  {info.isTrueRing ? "Yes" : "No"}
+                </span>
+              </Field>
+              <div className="col-span-2 md:col-span-3">
+                <Field label="Description">
+                  {getLocalizedValue(info.description, displayLang)}
+                </Field>
               </div>
-            ) : (
-              <span className="text-gray-400">Not uploaded</span>
-            )}
-          </Field>
-        </dl>
-      </section>
+              <div className="col-span-2 md:col-span-3">
+                <Field label="Notes">
+                  {info.notes?.length > 0 ? info.notes.join(", ") : "-"}
+                </Field>
+              </div>
+              <div className="col-span-2 md:col-span-3">
+                <Field label="Custom Tags">
+                  {info.customTags?.length > 0 ? (
+                    <div className="flex flex-wrap gap-1 mt-1">
+                      {info.customTags.map((tag) => (
+                        <span
+                          key={tag}
+                          className="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded-full"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  ) : (
+                    "-"
+                  )}
+                </Field>
+              </div>
+            </dl>
+          </section>
+
+          {/* Identifiers */}
+          <section className="bg-white rounded-lg border border-gray-200 p-6">
+            <h2 className="text-lg font-semibold text-gray-800 mb-4">
+              Identifiers
+            </h2>
+            <dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
+              <Field label="Document ID">{melody.id}</Field>
+              <Field label="UID">{melody.uid}</Field>
+              <Field label="PID (Playback ID)">{melody.pid}</Field>
+              <div className="col-span-2 md:col-span-3">
+                <Field label="URL">{melody.url}</Field>
+              </div>
+            </dl>
+          </section>
+        </div>
+
+        {/* Right column */}
+        <div className="space-y-6">
+          {/* Default Settings */}
+          <section className="bg-white rounded-lg border border-gray-200 p-6">
+            <h2 className="text-lg font-semibold text-gray-800 mb-4">
+              Default Settings
+            </h2>
+            <dl className="grid grid-cols-2 md:grid-cols-3 gap-4">
+              <Field label="Speed">{settings.speed}%</Field>
+              <Field label="Duration">{formatDuration(settings.duration)}</Field>
+              <Field label="Total Run Duration">{settings.totalRunDuration}</Field>
+              <Field label="Pause Duration">{settings.pauseDuration}</Field>
+              <Field label="Infinite Loop">
+                <span
+                  className={`px-2 py-0.5 text-xs rounded-full ${
+                    settings.infiniteLoop
+                      ? "bg-green-100 text-green-700"
+                      : "bg-gray-100 text-gray-500"
+                  }`}
+                >
+                  {settings.infiniteLoop ? "Yes" : "No"}
+                </span>
+              </Field>
+              <div className="col-span-2 md:col-span-3">
+                <Field label="Echo Ring">
+                  {settings.echoRing?.length > 0
+                    ? settings.echoRing.join(", ")
+                    : "-"}
+                </Field>
+              </div>
+              <div className="col-span-2 md:col-span-3">
+                <Field label="Note Assignments">
+                  {settings.noteAssignments?.length > 0
+                    ? settings.noteAssignments.join(", ")
+                    : "-"}
+                </Field>
+              </div>
+            </dl>
+          </section>
+
+          {/* Files */}
+          <section className="bg-white rounded-lg border border-gray-200 p-6">
+            <h2 className="text-lg font-semibold text-gray-800 mb-4">Files</h2>
+            <dl className="space-y-4">
+              <Field label="Binary File">
+                {files.binary_url ? (
+                  <a
+                    href={files.binary_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-600 hover:text-blue-800 underline"
+                  >
+                    Download binary
+                  </a>
+                ) : (
+                  <span className="text-gray-400">Not uploaded</span>
+                )}
+              </Field>
+              <Field label="Audio Preview">
+                {files.preview_url ? (
+                  <div className="space-y-1">
+                    <audio controls src={files.preview_url} className="h-8" />
+                    <a
+                      href={files.preview_url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-600 hover:text-blue-800 underline text-xs"
+                    >
+                      Download preview
+                    </a>
+                  </div>
+                ) : (
+                  <span className="text-gray-400">Not uploaded</span>
+                )}
+              </Field>
+            </dl>
+          </section>
+        </div>
+      </div>
 
       <ConfirmDialog
         open={showDelete}
         title="Delete Melody"
-        message={`Are you sure you want to delete "${info.name}"? This will also delete any uploaded files. This action cannot be undone.`}
+        message={`Are you sure you want to delete "${displayName}"? This will also delete any uploaded files. This action cannot be undone.`}
         onConfirm={handleDelete}
         onCancel={() => setShowDelete(false)}
       />

frontend/src/melodies/MelodyList.jsx

@@ -5,6 +5,7 @@ import { useAuth } from "../auth/AuthContext";
 import SearchBar from "../components/SearchBar";
 import DataTable from "../components/DataTable";
 import ConfirmDialog from "../components/ConfirmDialog";
+import { getLocalizedValue, getLanguageName } from "./melodyUtils";
 
 const MELODY_TYPES = ["", "orthodox", "catholic", "all"];
 const MELODY_TONES = ["", "normal", "festive", "cheerful", "lamentation"];
@@ -17,11 +18,20 @@ export default function MelodyList() {
   const [search, setSearch] = useState("");
   const [typeFilter, setTypeFilter] = useState("");
   const [toneFilter, setToneFilter] = useState("");
+  const [displayLang, setDisplayLang] = useState("en");
+  const [melodySettings, setMelodySettings] = useState(null);
   const [deleteTarget, setDeleteTarget] = useState(null);
   const navigate = useNavigate();
   const { hasRole } = useAuth();
   const canEdit = hasRole("superadmin", "melody_editor");
 
+  useEffect(() => {
+    api.get("/settings/melody").then((ms) => {
+      setMelodySettings(ms);
+      setDisplayLang(ms.primary_language || "en");
+    });
+  }, []);
+
   const fetchMelodies = async () => {
     setLoading(true);
     setError("");
@@ -57,13 +67,17 @@ export default function MelodyList() {
     }
   };
 
+  const getDisplayName = (nameDict) => {
+    return getLocalizedValue(nameDict, displayLang, "Untitled");
+  };
+
   const columns = [
     {
       key: "name",
       label: "Name",
       render: (row) => (
         <span className="font-medium text-gray-900">
-          {row.information?.name || "Untitled"}
+          {getDisplayName(row.information?.name)}
         </span>
       ),
     },
@@ -133,6 +147,8 @@ export default function MelodyList() {
       : []),
   ];
 
+  const languages = melodySettings?.available_languages || ["en"];
+
   return (
     <div>
       <div className="flex items-center justify-between mb-6">
@@ -152,7 +168,7 @@ export default function MelodyList() {
           onSearch={setSearch}
           placeholder="Search by name, description, or tags..."
         />
-        <div className="flex gap-3">
+        <div className="flex flex-wrap gap-3">
           <select
             value={typeFilter}
             onChange={(e) => setTypeFilter(e.target.value)}
@@ -177,6 +193,19 @@ export default function MelodyList() {
               </option>
             ))}
           </select>
+          {languages.length > 1 && (
+            <select
+              value={displayLang}
+              onChange={(e) => setDisplayLang(e.target.value)}
+              className="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              {languages.map((l) => (
+                <option key={l} value={l}>
+                  {getLanguageName(l)}
+                </option>
+              ))}
+            </select>
+          )}
           <span className="flex items-center text-sm text-gray-500">
             {total} {total === 1 ? "melody" : "melodies"}
           </span>
@@ -203,7 +232,7 @@ export default function MelodyList() {
       <ConfirmDialog
         open={!!deleteTarget}
         title="Delete Melody"
-        message={`Are you sure you want to delete "${deleteTarget?.information?.name}"? This will also delete any uploaded files.`}
+        message={`Are you sure you want to delete "${getDisplayName(deleteTarget?.information?.name)}"? This will also delete any uploaded files.`}
         onConfirm={handleDelete}
         onCancel={() => setDeleteTarget(null)}
       />

frontend/src/melodies/MelodySettings.jsx

@@ -0,0 +1,341 @@
+import { useState, useEffect } from "react";
+import api from "../api/client";
+import {
+  LANGUAGE_MASTER_LIST,
+  getLanguageName,
+  formatDuration,
+  normalizeColor,
+} from "./melodyUtils";
+
+export default function MelodySettings() {
+  const [settings, setSettings] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+
+  // Add language state
+  const [langToAdd, setLangToAdd] = useState("");
+
+  // Add color state
+  const [colorToAdd, setColorToAdd] = useState("#FF0000");
+  const [colorHexInput, setColorHexInput] = useState("#FF0000");
+
+  // Add duration state
+  const [durationToAdd, setDurationToAdd] = useState("");
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const loadSettings = async () => {
+    setLoading(true);
+    try {
+      const data = await api.get("/settings/melody");
+      setSettings(data);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const saveSettings = async (updated) => {
+    setSaving(true);
+    setError("");
+    setSuccess("");
+    try {
+      const result = await api.put("/settings/melody", updated);
+      setSettings(result);
+      setSuccess("Settings saved.");
+      setTimeout(() => setSuccess(""), 2000);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const addLanguage = () => {
+    if (!langToAdd || settings.available_languages.includes(langToAdd)) return;
+    const updated = {
+      ...settings,
+      available_languages: [...settings.available_languages, langToAdd],
+    };
+    setLangToAdd("");
+    saveSettings(updated);
+  };
+
+  const removeLanguage = (code) => {
+    if (settings.available_languages.length <= 1) return;
+    const updated = {
+      ...settings,
+      available_languages: settings.available_languages.filter((c) => c !== code),
+      primary_language:
+        settings.primary_language === code
+          ? settings.available_languages.find((c) => c !== code)
+          : settings.primary_language,
+    };
+    saveSettings(updated);
+  };
+
+  const setPrimaryLanguage = (code) => {
+    saveSettings({ ...settings, primary_language: code });
+  };
+
+  const addColor = () => {
+    const color = colorHexInput.startsWith("#") ? colorHexInput : `#${colorHexInput}`;
+    if (!/^#[0-9A-Fa-f]{6}$/.test(color)) return;
+    if (settings.quick_colors.includes(color)) return;
+    const updated = {
+      ...settings,
+      quick_colors: [...settings.quick_colors, color],
+    };
+    saveSettings(updated);
+  };
+
+  const removeColor = (color) => {
+    const updated = {
+      ...settings,
+      quick_colors: settings.quick_colors.filter((c) => c !== color),
+    };
+    saveSettings(updated);
+  };
+
+  const addDuration = () => {
+    const val = parseInt(durationToAdd, 10);
+    if (isNaN(val) || val < 0) return;
+    if (settings.duration_values.includes(val)) return;
+    const updated = {
+      ...settings,
+      duration_values: [...settings.duration_values, val].sort((a, b) => a - b),
+    };
+    setDurationToAdd("");
+    saveSettings(updated);
+  };
+
+  const removeDuration = (val) => {
+    const updated = {
+      ...settings,
+      duration_values: settings.duration_values.filter((v) => v !== val),
+    };
+    saveSettings(updated);
+  };
+
+  if (loading) {
+    return <div className="text-center py-8 text-gray-500">Loading...</div>;
+  }
+
+  if (!settings) {
+    return (
+      <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3">
+        {error || "Failed to load settings."}
+      </div>
+    );
+  }
+
+  const availableLangsToAdd = LANGUAGE_MASTER_LIST.filter(
+    (l) => !settings.available_languages.includes(l.code)
+  );
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-gray-900 mb-6">Melody Settings</h1>
+
+      {error && (
+        <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-md p-3 mb-4">
+          {error}
+        </div>
+      )}
+      {success && (
+        <div className="bg-green-50 border border-green-200 text-green-700 text-sm rounded-md p-3 mb-4">
+          {success}
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+        {/* --- Languages Section --- */}
+        <section className="bg-white rounded-lg border border-gray-200 p-6">
+          <h2 className="text-lg font-semibold text-gray-800 mb-4">
+            Available Languages
+          </h2>
+          <div className="space-y-2 mb-4">
+            {settings.available_languages.map((code) => (
+              <div
+                key={code}
+                className="flex items-center justify-between px-3 py-2 bg-gray-50 rounded-md"
+              >
+                <div className="flex items-center gap-3">
+                  <span className="text-sm font-mono text-gray-500 uppercase w-8">
+                    {code}
+                  </span>
+                  <span className="text-sm text-gray-900">
+                    {getLanguageName(code)}
+                  </span>
+                  {settings.primary_language === code && (
+                    <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
+                      Primary
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  {settings.primary_language !== code && (
+                    <button
+                      type="button"
+                      onClick={() => setPrimaryLanguage(code)}
+                      className="text-xs text-blue-600 hover:text-blue-800"
+                      disabled={saving}
+                    >
+                      Set Primary
+                    </button>
+                  )}
+                  {settings.available_languages.length > 1 && (
+                    <button
+                      type="button"
+                      onClick={() => removeLanguage(code)}
+                      className="text-xs text-red-600 hover:text-red-800"
+                      disabled={saving}
+                    >
+                      Remove
+                    </button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="flex gap-2">
+            <select
+              value={langToAdd}
+              onChange={(e) => setLangToAdd(e.target.value)}
+              className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="">Select language...</option>
+              {availableLangsToAdd.map((l) => (
+                <option key={l.code} value={l.code}>
+                  {l.name} ({l.code})
+                </option>
+              ))}
+            </select>
+            <button
+              type="button"
+              onClick={addLanguage}
+              disabled={!langToAdd || saving}
+              className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Add
+            </button>
+          </div>
+        </section>
+
+        {/* --- Quick Colors Section --- */}
+        <section className="bg-white rounded-lg border border-gray-200 p-6">
+          <h2 className="text-lg font-semibold text-gray-800 mb-4">
+            Quick Selection Colors
+          </h2>
+          <div className="flex flex-wrap gap-3 mb-4">
+            {settings.quick_colors.map((color) => (
+              <div key={color} className="relative group">
+                <div
+                  className="w-10 h-10 rounded-lg border-2 border-gray-200 shadow-sm cursor-default"
+                  style={{ backgroundColor: normalizeColor(color) }}
+                  title={color}
+                />
+                <button
+                  type="button"
+                  onClick={() => removeColor(color)}
+                  disabled={saving}
+                  className="absolute -top-1.5 -right-1.5 w-5 h-5 bg-red-500 text-white rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+                >
+                  &times;
+                </button>
+              </div>
+            ))}
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="color"
+              value={colorToAdd}
+              onChange={(e) => {
+                setColorToAdd(e.target.value);
+                setColorHexInput(e.target.value);
+              }}
+              className="w-10 h-10 rounded cursor-pointer border border-gray-300"
+            />
+            <input
+              type="text"
+              value={colorHexInput}
+              onChange={(e) => {
+                setColorHexInput(e.target.value);
+                if (/^#[0-9A-Fa-f]{6}$/.test(e.target.value)) {
+                  setColorToAdd(e.target.value);
+                }
+              }}
+              placeholder="#FF0000"
+              className="w-28 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
+            />
+            <button
+              type="button"
+              onClick={addColor}
+              disabled={saving}
+              className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Add
+            </button>
+          </div>
+        </section>
+
+        {/* --- Duration Presets Section --- */}
+        <section className="bg-white rounded-lg border border-gray-200 p-6 xl:col-span-2">
+          <h2 className="text-lg font-semibold text-gray-800 mb-4">
+            Duration Presets (seconds)
+          </h2>
+          <div className="flex flex-wrap gap-2 mb-4">
+            {settings.duration_values.map((val) => (
+              <div
+                key={val}
+                className="group flex items-center gap-1 px-3 py-1.5 bg-gray-50 border border-gray-200 rounded-full"
+              >
+                <span className="text-sm text-gray-900">
+                  {formatDuration(val)}
+                </span>
+                <span className="text-xs text-gray-400 ml-1">({val}s)</span>
+                <button
+                  type="button"
+                  onClick={() => removeDuration(val)}
+                  disabled={saving}
+                  className="ml-1 text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity text-xs"
+                >
+                  &times;
+                </button>
+              </div>
+            ))}
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="number"
+              min="0"
+              value={durationToAdd}
+              onChange={(e) => setDurationToAdd(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  addDuration();
+                }
+              }}
+              placeholder="Seconds (e.g. 45)"
+              className="w-40 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+            <button
+              type="button"
+              onClick={addDuration}
+              disabled={saving || !durationToAdd}
+              className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Add
+            </button>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

frontend/src/melodies/TranslationModal.jsx

@@ -0,0 +1,98 @@
+import { useState, useEffect } from "react";
+import { getLanguageName } from "./melodyUtils";
+
+/**
+ * Modal for editing translations of a field (Name or Description).
+ * Props:
+ *   open       - boolean
+ *   onClose    - function
+ *   field      - string label ("Name" or "Description")
+ *   value      - dict { lang_code: text }
+ *   onChange    - function(updatedDict)
+ *   languages  - array of lang codes ["en", "el", "sr"]
+ *   multiline  - boolean (use textarea instead of input)
+ */
+export default function TranslationModal({
+  open,
+  onClose,
+  field,
+  value,
+  onChange,
+  languages,
+  multiline = false,
+}) {
+  const [draft, setDraft] = useState({});
+
+  useEffect(() => {
+    if (open) {
+      setDraft({ ...value });
+    }
+  }, [open, value]);
+
+  if (!open) return null;
+
+  const updateDraft = (lang, text) => {
+    setDraft((prev) => ({ ...prev, [lang]: text }));
+  };
+
+  const handleSave = () => {
+    onChange(draft);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/50" onClick={onClose} />
+      <div className="relative bg-white rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[80vh] overflow-y-auto">
+        <div className="p-6">
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">
+            Translations — {field}
+          </h3>
+          <div className="space-y-3">
+            {languages.map((lang) => (
+              <div key={lang}>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  {getLanguageName(lang)}{" "}
+                  <span className="text-gray-400 font-mono text-xs uppercase">
+                    ({lang})
+                  </span>
+                </label>
+                {multiline ? (
+                  <textarea
+                    value={draft[lang] || ""}
+                    onChange={(e) => updateDraft(lang, e.target.value)}
+                    rows={2}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                  />
+                ) : (
+                  <input
+                    type="text"
+                    value={draft[lang] || ""}
+                    onChange={(e) => updateDraft(lang, e.target.value)}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+          <div className="flex justify-end gap-3 mt-6">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 bg-gray-100 text-gray-700 text-sm rounded-md hover:bg-gray-200 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors"
+            >
+              Save Translations
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/melodies/melodyUtils.js

@@ -0,0 +1,81 @@
+/**
+ * Format duration in seconds to human-readable string.
+ * 0 → "Single Run", 45 → "0:45", 75 → "1:15", 300 → "5:00"
+ */
+export function formatDuration(seconds) {
+  if (seconds === 0) return "Single Run";
+  const min = Math.floor(seconds / 60);
+  const sec = seconds % 60;
+  return `${min}:${sec.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Get a localized value from a dict, with fallback chain:
+ * selected lang → "en" → first available value → fallback
+ */
+export function getLocalizedValue(dict, lang, fallback = "") {
+  if (!dict || typeof dict !== "object") return fallback;
+  return dict[lang] || dict["en"] || Object.values(dict)[0] || fallback;
+}
+
+/**
+ * Normalize color string for HTML color input.
+ * Converts "0xFFRRGGBB" or "0xRRGGBB" format to "#RRGGBB".
+ */
+export function normalizeColor(val) {
+  if (!val) return "#000000";
+  if (val.startsWith("0x") || val.startsWith("0X")) {
+    const hex = val.slice(2);
+    // If 8 chars (AARRGGBB), skip alpha
+    return `#${hex.length === 8 ? hex.slice(2) : hex}`;
+  }
+  if (val.startsWith("#")) return val;
+  return `#${val}`;
+}
+
+/**
+ * Master list of common ISO 639-1 language codes.
+ */
+export const LANGUAGE_MASTER_LIST = [
+  { code: "en", name: "English" },
+  { code: "el", name: "Greek" },
+  { code: "sr", name: "Serbian" },
+  { code: "bg", name: "Bulgarian" },
+  { code: "ro", name: "Romanian" },
+  { code: "ru", name: "Russian" },
+  { code: "uk", name: "Ukrainian" },
+  { code: "ka", name: "Georgian" },
+  { code: "ar", name: "Arabic" },
+  { code: "de", name: "German" },
+  { code: "fr", name: "French" },
+  { code: "es", name: "Spanish" },
+  { code: "it", name: "Italian" },
+  { code: "pt", name: "Portuguese" },
+  { code: "nl", name: "Dutch" },
+  { code: "pl", name: "Polish" },
+  { code: "cs", name: "Czech" },
+  { code: "sk", name: "Slovak" },
+  { code: "hu", name: "Hungarian" },
+  { code: "hr", name: "Croatian" },
+  { code: "sl", name: "Slovenian" },
+  { code: "mk", name: "Macedonian" },
+  { code: "sq", name: "Albanian" },
+  { code: "tr", name: "Turkish" },
+  { code: "ja", name: "Japanese" },
+  { code: "zh", name: "Chinese" },
+  { code: "ko", name: "Korean" },
+  { code: "hi", name: "Hindi" },
+  { code: "he", name: "Hebrew" },
+  { code: "fi", name: "Finnish" },
+  { code: "sv", name: "Swedish" },
+  { code: "da", name: "Danish" },
+  { code: "no", name: "Norwegian" },
+];
+
+/**
+ * Get display name for a language code.
+ */
+export function getLanguageName(code) {
+  const lang = LANGUAGE_MASTER_LIST.find((l) => l.code === code);
+  return lang ? lang.name : code.toUpperCase();
+}