Actualiser src/features/menu/index.jsx

src/features/menu/index.jsx

@@ -1,6 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { initWebMidi, changeSelectedMidiPort } from '../../utils/midiHelper';
-import { useRef, useState, useEffect } from 'react';
 import { Select } from '../utils/components';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -9,18 +8,23 @@ import {
   parameterFromFile,
   parameterRefreshAll,
   selectEntities,
-} from '../editor/parameters/parameterSlice'; // probably temporarily here
+} from '../editor/parameters/parameterSlice'; 
 import { return_store_from_file, return_file_from_store } from '../io';
 import download from 'downloadjs';
 
 export default function Menu() {
-
-// À insérer juste au début de votre fonction export default function Menu() {
   const [midiDevices, setMidiDevices] = useState([]);
   const [activePortId, setActivePortId] = useState('');
+  const [file, setFile] = useState(null);
+  const fileRef = useRef(null);
   
+  const state = useSelector((state) => selectEntities(state));
+  const activeTab = useSelector((state) => state.parameters.activeTab);
+  const dispatch = useDispatch();
+  const reader = new FileReader();
+
+  // Chargement initial des périphériques MIDI
   useEffect(() => {
-  // Charge la liste des ports physiques au démarrage
     initWebMidi().then(devices => {
       setMidiDevices(devices);
       if (devices.length > 0) {
@@ -32,15 +36,9 @@ useEffect(() => {
   const handleMidiChange = (e) => {
     const portId = e.target.value;
     setActivePortId(portId);
-  changeSelectedMidiPort(portId); // Alerte notre helper du changement de câble
+    changeSelectedMidiPort(portId);
   };
 
-  const [file, setFile] = useState(null);
-  const fileRef = useRef(null);
-  const state = useSelector((state) => selectEntities(state));
-  const activeTab = useSelector((state) => state.parameters.activeTab);
-  const dispatch = useDispatch();
-  const reader = new FileReader();
   const loadFile = (f) => {
     reader.onloadend = (e) => {
       setFile(new Uint8Array(e.target.result));
@@ -68,7 +66,7 @@ const handleMidiChange = (e) => {
       <div className="menu-patch-container">
         <div className="patch-name">
           <input
-            className="block w-full rounded-md rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+            className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
             placeholder="Patch Name"
             type="text"
             maxLength="12"
@@ -84,16 +82,19 @@ const handleMidiChange = (e) => {
           />
         </div>
 
-<div class="flex items-center space-x-2 bg-gray-800 p-2 rounded border border-gray-700">
+        {/* Sélecteur de Port MIDI Corrigé pour React (className) */}
-  <label for="midi-select" class="text-xs font-bold text-gray-400 uppercase">Port MIDI :</label>
+        <div className="my-3 flex flex-col space-y-1 bg-gray-100 p-2 rounded border border-gray-300">
+          <label htmlFor="midi-select" className="text-xs font-bold text-gray-500 uppercase">
+            Port de sortie MIDI :
+          </label>
           <select 
             id="midi-select"
             value={activePortId}
             onChange={handleMidiChange}
-    class="bg-gray-900 text-sm text-white px-2 py-1 rounded border border-gray-600 focus:outline-none focus:border-indigo-500"
+            className="w-full bg-white text-sm text-gray-800 px-2 py-1 rounded border border-gray-400 focus:outline-none focus:border-indigo-500"
           >
             {midiDevices.length === 0 ? (
-      <option value="">Aucune interface trouvée</option>
+              <option value="">Aucun câble trouvé</option>
             ) : (
               midiDevices.map(device => (
                 <option key={device.id} value={device.id}>{device.name}</option>