From 21117736da67338afb85e468b75c17c80c959cd8 Mon Sep 17 00:00:00 2001
From: cvancau <christophe@van-cauwenberghe.net>
Date: Mon, 10 Aug 2026 21:21:14 +0200
Subject: [PATCH] Actualiser src/features/menu/index.jsx

---
 src/features/menu/index.jsx | 61 +++++++++++++++++++++++--------------
 1 file changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/features/menu/index.jsx b/src/features/menu/index.jsx
index 82412cd..8228e0b 100644
--- a/src/features/menu/index.jsx
+++ b/src/features/menu/index.jsx
@@ -37,6 +37,7 @@ export default function Menu(props) {
   const dispatch = useDispatch();
   const reader = new FileReader();
   const [activeKeyboardId, setActiveKeyboardId] = useState('');
+  const [keyboardChannel, setKeyboardChannel] = useState(1);
 
   useEffect(() => {
     // 1. Initialisation des ports MIDI physiques au démarrage
@@ -123,7 +124,7 @@ export default function Menu(props) {
 
   return (
 
-    <div className="h-screen col-span-1 flex flex-col justify-between border-solid border-r border-gray-300 bg-white px-2 py-2 text-xs">
+  <div className="h-screen col-span-1 flex flex-col justify-between border-solid border-r border-gray-300 bg-white px-2 py-2 text-xs">
       <div className="menu-patch-container">
 
       {/* 2 boutons Editor / Memory */}
@@ -144,9 +145,8 @@ export default function Menu(props) {
           </div>
       </div>
 
-        {/* BLOC SÉLECTEURS MIDI */}
-
-        <div className="my-1 flex flex-col space-y-3 bg-gray-100 p-2 rounded border border-gray-300">
+      {/* BLOC SÉLECTEURS MIDI */}
+      <div className="my-1 flex flex-col space-y-3 bg-gray-100 p-2 rounded border border-gray-300">
 
           <div className="flex flex-col space-y-1">
             <label htmlFor="midi-out-select" className="text-xs font-bold text-gray-500 uppercase">Out :</label>
@@ -184,26 +184,41 @@ export default function Menu(props) {
             </select>
           </div>
 
-          <div className="flex flex-col space-y-1">
-            <label className="text-xs font-bold text-gray-500 uppercase">Keyboard In :</label>
-            <select
-              value={activeKeyboardId}
-              onChange={(e) => {
-                setActiveKeyboardId(e.target.value);
-                changeKeyboardInputPort(e.target.value);
-              }}
-              className="w-full bg-white text-xs text-gray-800 px-1 py-1 rounded border border-gray-400"
-            >
-              <option value="">Aucun clavier</option>
-
-              {midiInputs.map(device => (
-                <option key={device.id} value={device.id}>
-                  {device.name}
-                </option>
-             ))}
-            </select>
+          <div className="grid grid-cols-3 gap-1">
+            <div className="col-span-2 flex flex-col space-y-1">
+              <label className="text-xs font-bold text-gray-500 uppercase">Keyboard In :</label>
+                <select
+                  value={activeKeyboardId}
+                  onChange={(e) => {
+                  setActiveKeyboardId(e.target.value);
+                  changeKeyboardInputPort(e.target.value, keyboardChannel);
+                  }}
+                  className="w-full bg-white text-xs px-1 py-1 rounded border border-gray-400"
+                >
+                  <option value="">Aucun clavier</option>
+                  {midiInputs.map(device => (
+                    <option key={device.id} value={device.id}>{device.name}</option>
+                  ))}
+                </select>
+            </div>
+            <div className="flex flex-col space-y-1">
+              <label className="text-xs font-bold text-gray-500 uppercase">Channel</label>
+              <select
+                value={keyboardChannel}
+                onChange={(e) => {
+                const channel = Number(e.target.value);
+                setKeyboardChannel(channel);
+                changeKeyboardInputPort(activeKeyboardId, channel);
+                }}
+                className="w-full bg-white text-xs px-1 py-1 rounded border border-gray-400"
+                >
+                {Array.from({ length: 16 }, (_, i) => (
+                 <option key={i + 1} value={i + 1}>{i + 1}</option>
+                ))}
+              </select>
+            </div>
           </div>
-        </div>
+      </div>
 
         {/* BLOC Patch Name */}