From 7ada648d1457a1c6b2faf459d3a742e2fc791621 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Tue, 12 Aug 2025 18:14:25 -0700
Subject: [PATCH] removed `instrumentSelectionTrackId` from projectStore, align
 the `instrumentSelectionTrackId` with `selectedTrackId`.

---
 src/components/InstrumentSelection.tsx |  8 +++---
 src/components/track/TrackInfoItem.tsx |  4 +--
 src/stores/projectStore.ts             | 35 ++++++++------------------
 3 files changed, 17 insertions(+), 30 deletions(-)

diff --git a/src/components/InstrumentSelection.tsx b/src/components/InstrumentSelection.tsx
index 6d98609..e32ace2 100644
--- a/src/components/InstrumentSelection.tsx
+++ b/src/components/InstrumentSelection.tsx
@@ -6,14 +6,14 @@ import { KGMidiTrack, type InstrumentType } from '../core/track/KGMidiTrack';
 const InstrumentSelection: React.FC = () => {
   const {
     tracks,
-    instrumentSelectionTrackId,
+    selectedTrackId,
     closeInstrumentSelection,
     setTrackInstrument
   } = useProjectStore();
 
   const targetTrack = useMemo(() => {
-    return tracks.find(t => t.getId().toString() === instrumentSelectionTrackId) || null;
-  }, [tracks, instrumentSelectionTrackId]);
+    return tracks.find(t => t.getId().toString() === selectedTrackId) || null;
+  }, [tracks, selectedTrackId]);
 
   const currentInstrumentKey: InstrumentType = (targetTrack && targetTrack instanceof KGMidiTrack)
     ? (targetTrack.getInstrument() as InstrumentType)
@@ -27,7 +27,7 @@ const InstrumentSelection: React.FC = () => {
   useEffect(() => {
     // Sync when the target track or its instrument changes
     setSelectedGroupKey(currentInstrumentDef?.group || 'PIANO_AND_KEYBOARDS');
-  }, [instrumentSelectionTrackId, currentInstrumentKey, currentInstrumentDef]);
+  }, [selectedTrackId, currentInstrumentKey, currentInstrumentDef]);
 
   const groups = useMemo(() => Object.entries(INSTRUMENT_GROUPS) as Array<[string, string]>, []);
 
diff --git a/src/components/track/TrackInfoItem.tsx b/src/components/track/TrackInfoItem.tsx
index 60b156a..19b898a 100644
--- a/src/components/track/TrackInfoItem.tsx
+++ b/src/components/track/TrackInfoItem.tsx
@@ -193,8 +193,8 @@ const TrackInfoItem: React.FC<TrackInfoItemProps> = ({
     e.stopPropagation();
     // Select this track as active when opening instrument panel
     setSelectedTrack(track.getId().toString());
-    // Toggle global InstrumentSelection panel for this track
-    toggleInstrumentSelectionForTrack(track.getId().toString());
+    // Toggle global InstrumentSelection panel (it follows selectedTrackId)
+    toggleInstrumentSelectionForTrack();
   };
 
   // Handle settings button click
diff --git a/src/stores/projectStore.ts b/src/stores/projectStore.ts
index fca7cd4..26906d9 100644
--- a/src/stores/projectStore.ts
+++ b/src/stores/projectStore.ts
@@ -57,7 +57,7 @@ interface ProjectState {
 
   // Instrument selection panel state
   showInstrumentSelection: boolean;
-  instrumentSelectionTrackId: string | null;
+  // instrumentSelectionTrackId removed; panel now follows selectedTrackId
   
   // Settings state
   showSettings: boolean;
@@ -105,8 +105,8 @@ interface ProjectState {
   toggleChatBox: () => void;
 
   // Instrument selection panel actions
-  openInstrumentSelectionForTrack: (trackId: string) => void;
-  toggleInstrumentSelectionForTrack: (trackId: string) => void;
+  openInstrumentSelectionForTrack: () => void;
+  toggleInstrumentSelectionForTrack: () => void;
   closeInstrumentSelection: () => void;
   
   // Settings actions
@@ -200,7 +200,6 @@ export const useProjectStore = create<ProjectState>((set, get) => {
   // Also auto-select it and open instrument selection panel
   let initialSelectedTrackId: string | null = null;
   let initialShowInstrumentSelection = false;
-  let initialInstrumentSelectionTrackId: string | null = null;
   try {
     const project = KGCore.instance().getCurrentProject();
     if (project.getTracks().length === 0) {
@@ -209,7 +208,6 @@ export const useProjectStore = create<ProjectState>((set, get) => {
       const createdId = String(addDefaultTrackCommand.getTrackId());
       initialSelectedTrackId = createdId;
       initialShowInstrumentSelection = true;
-      initialInstrumentSelectionTrackId = createdId;
     }
   } catch (error) {
     console.error('Error creating default track on startup:', error);
@@ -242,7 +240,6 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
     // Initial Instrument Selection panel state
     showInstrumentSelection: initialShowInstrumentSelection,
-    instrumentSelectionTrackId: initialInstrumentSelectionTrackId,
     
     // Initial Settings state
     showSettings: false,
@@ -285,7 +282,6 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         set({
           selectedTrackId: newTrackId,
           showInstrumentSelection: true,
-          instrumentSelectionTrackId: newTrackId
         });
         
         console.log(`Added track ${command.getTrackId()}`);
@@ -300,8 +296,8 @@ export const useProjectStore = create<ProjectState>((set, get) => {
         // Get the current tracks and find the index of the track being deleted
         const currentTracks = KGCore.instance().getCurrentProject().getTracks();
         const deletedTrackIndex = currentTracks.findIndex(track => track.getId() === id);
-        const currentSelectedTrackId = get().selectedTrackId;
-        const isCurrentTrackSelected = currentSelectedTrackId === id.toString();
+        const { selectedTrackId } = get();
+        const isCurrentTrackSelected = selectedTrackId === id.toString();
         
         // Create and execute the remove track command
         const command = new RemoveTrackCommand(id);
@@ -324,9 +320,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
 
           setTimeout(() => {
             set({
-              selectedTrackId: isCurrentTrackSelected ? newSelectedTrackId : currentSelectedTrackId,
-              showInstrumentSelection: true,
-              instrumentSelectionTrackId: isCurrentTrackSelected ? newSelectedTrackId : currentSelectedTrackId,
+              selectedTrackId: isCurrentTrackSelected ? newSelectedTrackId : selectedTrackId,
             });
           }, 0);
         } else {
@@ -334,7 +328,6 @@ export const useProjectStore = create<ProjectState>((set, get) => {
           set({
             selectedTrackId: null,
             showInstrumentSelection: false,
-            instrumentSelectionTrackId: null
           });
         }
         
@@ -533,7 +526,6 @@ export const useProjectStore = create<ProjectState>((set, get) => {
           set({
             selectedTrackId: firstTrackIdStr,
             showInstrumentSelection: true,
-            instrumentSelectionTrackId: firstTrackIdStr
           });
         }
 
@@ -644,13 +636,8 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     },
 
     setSelectedTrack: (trackId: string | null) => {
-      const { showInstrumentSelection } = get();
       // Update selected track id
       set({ selectedTrackId: trackId });
-      // If instrument panel is open and a track is selected, retarget the panel
-      if (showInstrumentSelection && trackId) {
-        set({ instrumentSelectionTrackId: trackId });
-      }
     },
     
     // Piano roll actions
@@ -688,14 +675,14 @@ export const useProjectStore = create<ProjectState>((set, get) => {
     },
 
     // Instrument selection panel actions
-    openInstrumentSelectionForTrack: (trackId: string) => {
-      set({ showInstrumentSelection: true, instrumentSelectionTrackId: trackId });
+    openInstrumentSelectionForTrack: () => {
+      set({ showInstrumentSelection: true });
     },
-    toggleInstrumentSelectionForTrack: (trackId: string) => {
-      set({ showInstrumentSelection: true, instrumentSelectionTrackId: trackId });
+    toggleInstrumentSelectionForTrack: () => {
+      set({ showInstrumentSelection: true });
     },
     closeInstrumentSelection: () => {
-      set({ showInstrumentSelection: false, instrumentSelectionTrackId: null });
+      set({ showInstrumentSelection: false });
     },
     
     // Settings action implementations