feat: added mode list dropdown

src/components/piano-roll/PianoRoll.tsx

@@ -35,9 +35,12 @@ const PianoRoll: React.FC<PianoRollProps> = ({
   // Quantization state
   const [quantPosition, setQuantPosition] = useState<string>('1/8');
   const [quantLength, setQuantLength] = useState<string>('1/8');
-  
+
   // Snapping state
   const [snapping, setSnapping] = useState<string>('NO SNAP');
+
+  // Mode state
+  const [selectedMode, setSelectedMode] = useState<string>('ionian');
   
   // Piano roll state with temporary initial values
   const [position, setPosition] = useState(initialPosition || { x: 0, y: 0 });
@@ -295,6 +298,15 @@ const PianoRoll: React.FC<PianoRollProps> = ({
       console.log(`Selected snapping: ${value}`);
     }
   }, []);
+
+  // Handle mode selection
+  const handleModeSelect = useCallback((value: string) => {
+    setSelectedMode(value);
+    KGPianoRollState.instance().setCurrentMode(value);
+    if (DEBUG_MODE.PIANO_ROLL) {
+      console.log(`Selected mode: ${value}`);
+    }
+  }, []);
   
   // Handler for receiving the setNoteUpdateCounter function from PianoRollContent
   const handleSetNoteUpdateTrigger = (setNoteFn: React.Dispatch<React.SetStateAction<number>>) => {
@@ -765,6 +777,8 @@ const PianoRoll: React.FC<PianoRollProps> = ({
         onQuantSelect={handleQuantSelect}
         snapping={snapping}
         onSnappingSelect={handleSnappingSelect}
+        selectedMode={selectedMode}
+        onModeChange={handleModeSelect}
         blinkButton={blinkButton}
       />
       

src/components/piano-roll/PianoRollToolbar.tsx

@@ -11,6 +11,8 @@ interface PianoRollToolbarProps {
   onQuantSelect: (type: 'position' | 'length', value: string) => void;
   snapping: string;
   onSnappingSelect: (value: string) => void;
+  selectedMode: string;
+  onModeChange: (value: string) => void;
   blinkButton?: string | null;
 }
 
@@ -22,12 +24,21 @@ const PianoRollToolbar: React.FC<PianoRollToolbarProps> = ({
   onQuantSelect,
   snapping,
   onSnappingSelect,
+  selectedMode,
+  onModeChange,
   blinkButton = null
 }) => {
   return (
     <div className="piano-roll-toolbar">
       <div className="toolbar-left">
-        {/* Left section - can add more tools later */}
+        {/* Left section with mode dropdown */}
+        <KGDropdown
+          options={KGPianoRollState.MODE_OPTIONS}
+          value={selectedMode}
+          onChange={(value) => onModeChange(value)}
+          label="Mode"
+          buttonClassName="mode-dropdown"
+        />
       </div>
       
       <div className="toolbar-center">
@@ -58,7 +69,7 @@ const PianoRollToolbar: React.FC<PianoRollToolbarProps> = ({
           buttonClassName="snapping"
           showValueAsLabel={true}
         />
-        
+
         <KGDropdown
           options={KGPianoRollState.QUANT_POS_OPTIONS}
           value={quantPosition}
@@ -66,7 +77,7 @@ const PianoRollToolbar: React.FC<PianoRollToolbarProps> = ({
           label="Qua. Pos."
           buttonClassName={`quant-position ${blinkButton === 'quant-position' ? 'button-blink' : ''}`}
         />
-        
+
         <KGDropdown
           options={KGPianoRollState.QUANT_LEN_OPTIONS}
           value={quantLength}