Changed Localization to JSON String

frontend/src/melodies/MelodyForm.jsx

@@ -7,14 +7,16 @@ import {
   getLanguageName,
   normalizeColor,
   formatDuration,
+  parseLocalizedString,
+  serializeLocalizedString,
 } from "./melodyUtils";
 
 const MELODY_TYPES = ["orthodox", "catholic", "all"];
 const MELODY_TONES = ["normal", "festive", "cheerful", "lamentation"];
 
 const defaultInfo = {
-  name: {},
-  description: {},
+  name: "",
+  description: "",
   melodyTone: "normal",
   customTags: [],
   minSpeed: 0,
@@ -155,7 +157,9 @@ export default function MelodyForm() {
 
   // Update a localized field for the current edit language
   const updateLocalizedField = (fieldKey, text) => {
-    updateInfo(fieldKey, { ...information[fieldKey], [editLang]: text });
+    const dict = parseLocalizedString(information[fieldKey]);
+    dict[editLang] = text;
+    updateInfo(fieldKey, serializeLocalizedString(dict));
   };
 
   const handleSubmit = async (e) => {
@@ -836,8 +840,8 @@ export default function MelodyForm() {
           setTranslationModal((prev) => ({ ...prev, open: false }))
         }
         field={translationModal.field}
-        value={information[translationModal.fieldKey] || {}}
-        onChange={(updated) => updateInfo(translationModal.fieldKey, updated)}
+        value={parseLocalizedString(information[translationModal.fieldKey])}
+        onChange={(updated) => updateInfo(translationModal.fieldKey, serializeLocalizedString(updated))}
         languages={languages}
         multiline={translationModal.multiline}
       />

frontend/src/melodies/melodyUtils.js

@@ -10,11 +10,36 @@ export function formatDuration(seconds) {
 }
 
 /**
- * Get a localized value from a dict, with fallback chain:
+ * Parse a JSON-encoded localized string into a dict.
+ * If already a dict, returns it as-is. Returns {} on failure.
+ */
+export function parseLocalizedString(value) {
+  if (!value) return {};
+  if (typeof value === "object") return value;
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed !== null) return parsed;
+  } catch {
+    // Not valid JSON — treat as plain string
+    return { en: value };
+  }
+  return {};
+}
+
+/**
+ * Serialize a localized dict back to a JSON string for storage.
+ */
+export function serializeLocalizedString(dict) {
+  if (!dict || typeof dict !== "object") return "";
+  return JSON.stringify(dict);
+}
+
+/**
+ * Get a localized value from a JSON string or dict, with fallback chain:
  * selected lang → "en" → first available value → fallback
  */
-export function getLocalizedValue(dict, lang, fallback = "") {
-  if (!dict || typeof dict !== "object") return fallback;
+export function getLocalizedValue(value, lang, fallback = "") {
+  const dict = parseLocalizedString(value);
   return dict[lang] || dict["en"] || Object.values(dict)[0] || fallback;
 }