MIDI Recording and details improvement

frontend/src/pages/AudiotrackManager/AudiotrackButton.tsx

@@ -3,6 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { Button, Dialog, DialogBody, DialogContent, DialogSurface, DialogTrigger } from '@fluentui/react-components';
 import { CustomToastContainer } from '../../components/CustomToastContainer';
 import { LazyImportComponent } from '../../components/LazyImportComponent';
+import { flushMidiRecordingContent } from '../../utils';
+import commonStore from '../../stores/commonStore';
 
 const AudiotrackEditor = lazy(() => import('./AudiotrackEditor'));
 
@@ -13,7 +15,12 @@ export const AudiotrackButton: FC<{
 }> = ({ size, shape, appearance }) => {
   const { t } = useTranslation();
 
-  return <Dialog>
+  return <Dialog onOpenChange={(e, data) => {
+    if (!data.open) {
+      flushMidiRecordingContent();
+      commonStore.setRecordingTrackId('');
+    }
+  }}>
     <DialogTrigger disableButtonEnhancement>
       <Button size={size} shape={shape} appearance={appearance}>
         {t('Open MIDI Input Audio Tracks')}