Added SpeedCalc and MelodyBuilder. Evaluation Pending

frontend/src/melodies/MelodyForm.jsx

@@ -2,6 +2,8 @@ import { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import api from "../api/client";
 import TranslationModal from "./TranslationModal";
+import SelectBuiltMelodyModal from "./builder/SelectBuiltMelodyModal";
+import BuildOnTheFlyModal from "./builder/BuildOnTheFlyModal";
 import {
   getLocalizedValue,
   getLanguageName,
@@ -80,6 +82,9 @@ export default function MelodyForm() {
     multiline: false,
   });
 
+  const [showSelectBuilt, setShowSelectBuilt] = useState(false);
+  const [showBuildOnTheFly, setShowBuildOnTheFly] = useState(false);
+
   useEffect(() => {
     api.get("/settings/melody").then((ms) => {
       setMelodySettings(ms);
@@ -553,9 +558,29 @@ export default function MelodyForm() {
               <h2 className="text-lg font-semibold mb-4" style={headingStyle}>Files</h2>
               <div className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium mb-1" style={labelStyle}>Binary File (.bin)</label>
+                  <label className="block text-sm font-medium mb-1" style={labelStyle}>Binary File (.bsm / .bin)</label>
                   {existingFiles.binary_url && (<p className="text-xs mb-1" style={{ color: "var(--success)" }}>Current file uploaded. Selecting a new file will replace it.</p>)}
-                  <input type="file" accept=".bin" onChange={(e) => setBinaryFile(e.target.files[0] || null)} className="w-full text-sm" style={mutedStyle} />
+                  <input type="file" accept=".bin,.bsm" onChange={(e) => setBinaryFile(e.target.files[0] || null)} className="w-full text-sm" style={mutedStyle} />
+                  {isEdit && (
+                    <div className="flex gap-2 mt-2">
+                      <button
+                        type="button"
+                        onClick={() => setShowSelectBuilt(true)}
+                        className="px-3 py-1.5 text-xs rounded-md transition-colors"
+                        style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-secondary)", border: "1px solid var(--border-primary)" }}
+                      >
+                        Select Built Melody
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setShowBuildOnTheFly(true)}
+                        className="px-3 py-1.5 text-xs rounded-md transition-colors"
+                        style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-secondary)", border: "1px solid var(--border-primary)" }}
+                      >
+                        Build on the Fly
+                      </button>
+                    </div>
+                  )}
                 </div>
                 <div>
                   <label className="block text-sm font-medium mb-1" style={labelStyle}>Audio Preview (.mp3)</label>
@@ -582,6 +607,31 @@ export default function MelodyForm() {
         languages={languages}
         multiline={translationModal.multiline}
       />
+
+      {isEdit && (
+        <>
+          <SelectBuiltMelodyModal
+            open={showSelectBuilt}
+            melodyId={id}
+            onClose={() => setShowSelectBuilt(false)}
+            onSuccess={() => {
+              setShowSelectBuilt(false);
+              loadMelody();
+            }}
+          />
+          <BuildOnTheFlyModal
+            open={showBuildOnTheFly}
+            melodyId={id}
+            defaultName={getLocalizedValue(information.name, "en", "") || getLocalizedValue(information.name, editLang, "")}
+            defaultPid={pid}
+            onClose={() => setShowBuildOnTheFly(false)}
+            onSuccess={() => {
+              setShowBuildOnTheFly(false);
+              loadMelody();
+            }}
+          />
+        </>
+      )}
     </div>
   );
 }