Enhance FM synthesis + cleaning code architecture

src/components/ui/Switch.tsx

@@ -0,0 +1,49 @@
+interface SwitchProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  label?: string
+  vertical?: boolean
+}
+
+export function Switch({ checked, onChange, label, vertical = false }: SwitchProps) {
+  if (vertical) {
+    return (
+      <label className="flex flex-col items-center gap-1 cursor-pointer">
+        <div
+          className={`relative w-4 h-12 border-2 transition-colors ${
+            checked ? 'bg-white border-white' : 'bg-black border-white'
+          }`}
+          onClick={() => onChange(!checked)}
+        >
+          <div
+            className={`absolute left-0 w-3 h-3 transition-transform ${
+              checked ? 'translate-y-8 bg-black' : 'translate-y-0 bg-white'
+            }`}
+          />
+        </div>
+      </label>
+    )
+  }
+
+  return (
+    <label className="flex items-center gap-2 cursor-pointer">
+      <div
+        className={`relative w-8 h-4 border-2 transition-colors ${
+          checked ? 'bg-white border-white' : 'bg-black border-white'
+        }`}
+        onClick={() => onChange(!checked)}
+      >
+        <div
+          className={`absolute top-0 w-3 h-3 transition-transform ${
+            checked ? 'translate-x-4 bg-black' : 'translate-x-0 bg-white'
+          }`}
+        />
+      </div>
+      {label && (
+        <span className="font-mono text-[9px] text-white select-none">
+          {label}
+        </span>
+      )}
+    </label>
+  )
+}