improve current instrument display

frontend/src/_locales/ja/main.json

@@ -312,5 +312,6 @@
   "JP": "日本語",
   "Music": "音楽",
   "Other": "その他",
-  "Import MIDI": "MIDIをインポート"
+  "Import MIDI": "MIDIをインポート",
+  "Current Instrument": "現在の楽器"
 }

frontend/src/_locales/zh-hans/main.json

@@ -312,5 +312,6 @@
   "JP": "日文",
   "Music": "音乐",
   "Other": "其他",
-  "Import MIDI": "导入MIDI"
+  "Import MIDI": "导入MIDI",
+  "Current Instrument": "当前乐器"
 }

frontend/src/pages/AudiotrackManager/AudiotrackEditor.tsx

@@ -28,7 +28,6 @@ import {
   tracksMinimalTotalTime
 } from '../../types/composition';
 import { toast } from 'react-toastify';
-import { ToastOptions } from 'react-toastify/dist/types';
 import {
   absPathAsset,
   flushMidiRecordingContent,
@@ -38,7 +37,6 @@ import {
   refreshTracksTotalTime
 } from '../../utils';
 import { OpenOpenFileDialog, PlayNote } from '../../../wailsjs/go/backend_golang/App';
-import { t } from 'i18next';
 
 const snapValue = 25;
 const minimalMoveTime = 8; // 1000/125=8ms wait_events=125
@@ -56,35 +54,6 @@ const pixelFix = 0.5;
 const topToArrowIcon = 19;
 const arrowIconToTracks = 23;
 
-const displayCurrentInstrumentType = () => {
-  const displayPanelId = 'instrument_panel_id';
-  const content: React.ReactNode =
-    <div className="flex gap-2 items-center">
-      {InstrumentTypeNameMap.map((name, i) =>
-        <Text key={name} style={{ whiteSpace: 'nowrap' }}
-          className={commonStore.instrumentType === i ? 'text-blue-600' : ''}
-          weight={commonStore.instrumentType === i ? 'bold' : 'regular'}
-          size={commonStore.instrumentType === i ? 300 : 100}
-        >{t(name)}</Text>)}
-    </div>;
-  const options: ToastOptions = {
-    type: 'default',
-    autoClose: 2000,
-    toastId: displayPanelId,
-    position: 'top-left',
-    style: {
-      width: 'fit-content'
-    }
-  };
-  if (toast.isActive(displayPanelId))
-    toast.update(displayPanelId, {
-      render: content,
-      ...options
-    });
-  else
-    toast(content, options);
-};
-
 const velocityToBin = (velocity: number) => {
   velocity = Math.max(0, Math.min(velocity, velocityEvents - 1));
   const binsize = velocityEvents / (velocityBins - 1);
@@ -164,7 +133,6 @@ let dropRecordingTime = false;
 export const midiMessageHandler = async (data: MidiMessage) => {
   if (data.messageType === 'ControlChange') {
     commonStore.setInstrumentType(Math.round(data.value / 127 * (InstrumentTypeNameMap.length - 1)));
-    displayCurrentInstrumentType();
     return;
   }
   if (commonStore.recordingTrackId) {
@@ -568,6 +536,18 @@ const AudiotrackEditor: FC<{ setPrompt: (prompt: string) => void }> = observer((
           </div>
         </Card>
       }
+      {
+        commonStore.platform !== 'web' &&
+        <div className="flex gap-2 items-end mx-auto">
+          {t('Current Instrument') + ':'}
+          {InstrumentTypeNameMap.map((name, i) =>
+            <Text key={name} style={{ whiteSpace: 'nowrap' }}
+              className={commonStore.instrumentType === i ? 'text-blue-600' : ''}
+              weight={commonStore.instrumentType === i ? 'bold' : 'regular'}
+              size={commonStore.instrumentType === i ? 300 : 100}
+            >{t(name)}</Text>)}
+        </div>
+      }
       <DialogTrigger disableButtonEnhancement>
         <Button icon={<MusicNote220Regular />} style={{ minHeight: '32px' }} onClick={() => {
           flushMidiRecordingContent();