From 808cb273904d334af3d03e07b4da4debf40ddfe8 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Sat, 14 Feb 2026 22:37:35 +0530
Subject: [PATCH] fix(ui): instrument selection modal now updates UI
 immediately

- Add updateParticipantTrackInstrument reducer to update sessionData.participants
- Dispatch both participant track and userTracks updates on instrument save
- Fix syncTracksToServer call to pass clientId instead of jamClient object
- UI now reflects instrument changes without needing page refresh

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/client/JKSessionMyTrack.js | 33 ++++++++++++++-----
 .../src/store/features/activeSessionSlice.js  | 15 +++++++++
 2 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/jam-ui/src/components/client/JKSessionMyTrack.js b/jam-ui/src/components/client/JKSessionMyTrack.js
index 4053f9c1c..75eea8f42 100644
--- a/jam-ui/src/components/client/JKSessionMyTrack.js
+++ b/jam-ui/src/components/client/JKSessionMyTrack.js
@@ -14,7 +14,7 @@ import { UncontrolledTooltip } from 'reactstrap';
 import { getInstrumentName } from '../../helpers/utils';
 import { getPersonById } from '../../helpers/rest';
 import { ASSIGNMENT } from '../../helpers/globals';
-import { selectSessionId } from '../../store/features/activeSessionSlice';
+import { selectSessionId, updateParticipantTrackInstrument, updateUserTrack } from '../../store/features/activeSessionSlice';
 import { syncTracksToServer } from '../../services/trackSyncService';
 import './JKSessionMyTrack.css';
 import pluginIcon from '../../assets/img/client/plugin.svg';
@@ -121,10 +121,25 @@ const JKSessionMyTrack = ({
     // For user's own track, use TRACK1
     await jamClient.TrackSetInstrument(ASSIGNMENT.TRACK1, instrumentId);
 
+    // Update Redux state immediately so UI reflects the change
+    if (clientId && track?.client_track_id) {
+      // Update participant track (for UI display)
+      dispatch(updateParticipantTrackInstrument({
+        clientId,
+        trackId: track.client_track_id,
+        instrumentId
+      }));
+      // Also update userTracks (for server sync payload)
+      dispatch(updateUserTrack({
+        id: track.client_track_id,
+        instrument_id: instrumentId
+      }));
+    }
+
     // Sync tracks to server after instrument change
-    if (sessionId && jamClient) {
+    if (sessionId && clientId) {
       console.log('[Track Sync] Instrument changed, syncing tracks');
-      dispatch(syncTracksToServer(sessionId, jamClient));
+      dispatch(syncTracksToServer(sessionId, clientId));
     }
 
     setShowInstrumentModal(false);
@@ -166,7 +181,7 @@ const JKSessionMyTrack = ({
           }}
           onClick={hideAvatar ? undefined : handleProfileClick}
         >
-          <img src={photoUrl} alt="avatar" />
+          <img src={photoUrl} alt="avatar" height={190} />
         </div>
         <div
           className="track-instrument"
@@ -174,7 +189,7 @@ const JKSessionMyTrack = ({
           onClick={!isRemote ? handleInstrumentClick : undefined}
           style={!isRemote ? { cursor: 'pointer' } : {}}
         >
-          <img height="45" src={instrumentIcon} width="45" alt="instrument" />
+          <img src={instrumentIcon}  alt="instrument" />
           {!isRemote && track?.hasVst && (
             <img
               src={pluginIcon}
@@ -200,7 +215,7 @@ const JKSessionMyTrack = ({
             target={`instrument-tooltip-${clientId}-${track?.client_track_id || 'chat'}`}
             trigger="hover click"
           >
-            {track?.instrument?.description || track?.instrument?.name || 'Unknown Instrument'}
+            {track?.instrument || 'Unknown Instrument'}
           </UncontrolledTooltip>
         )}
         <div className="track-controls">
@@ -208,8 +223,8 @@ const JKSessionMyTrack = ({
             <SessionTrackVU
               orientation="horizontal"
               lightCount={11}
-              lightWidth={17}
-              lightHeight={12}
+              lightWidth={25}
+              lightHeight={15}
               side="best"
               mixers={mixers}
             />
@@ -245,7 +260,7 @@ const JKSessionMyTrack = ({
                     <>
                       <div
                         onClick={() => {
-                          console.log('Configure');
+                          console.log('Audio configuration options coming soon');
                           setShowMenu(false);
                         }}
                       >
diff --git a/jam-ui/src/store/features/activeSessionSlice.js b/jam-ui/src/store/features/activeSessionSlice.js
index 526c3ac4c..9b234bded 100644
--- a/jam-ui/src/store/features/activeSessionSlice.js
+++ b/jam-ui/src/store/features/activeSessionSlice.js
@@ -134,6 +134,20 @@ export const activeSessionSlice = createSlice({
       }
     },
 
+    // Update a specific track's instrument for a participant in sessionData
+    updateParticipantTrackInstrument: (state, action) => {
+      const { clientId, trackId, instrumentId } = action.payload;
+      if (state.sessionData?.participants) {
+        const participant = state.sessionData.participants.find(p => p.client_id === clientId);
+        if (participant?.tracks) {
+          const track = participant.tracks.find(t => t.client_track_id === trackId);
+          if (track) {
+            track.instrument_id = instrumentId;
+          }
+        }
+      }
+    },
+
     // Tracks
     setUserTracks: (state, action) => {
       state.userTracks = action.payload;
@@ -306,6 +320,7 @@ export const {
   addParticipant,
   removeParticipant,
   updateParticipant,
+  updateParticipantTrackInstrument,
   setUserTracks,
   addUserTrack,
   removeUserTrack,