From 281c6eba7fcf3a413381b27f3e540df3c40cd6ab Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Thu, 15 Jan 2026 23:00:12 +0530
Subject: [PATCH] feat(05-03): add header with close link to backing track
 section

Matches JamTrack section format by adding a header showing
"Backing Track: {filename}" with a close link.

Changes:
- Added h5 header in JKSessionScreen with backing track filename
- Added close link with FontAwesome times icon
- Removed duplicate internal header from JKSessionBackingTrack component
- Now displays: "Backing Track: {shortFilename}" at the top
- Close link triggers handleBackingTrackMainClose

Format now matches JamTrack section:
- Header with name and close link
- Single track with instrument icon and mixer controls
- Consistent styling with border separator

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../client/JKSessionBackingTrack.js           | 44 +------------------
 .../src/components/client/JKSessionScreen.js  | 15 +++++++
 2 files changed, 16 insertions(+), 43 deletions(-)

diff --git a/jam-ui/src/components/client/JKSessionBackingTrack.js b/jam-ui/src/components/client/JKSessionBackingTrack.js
index 330082cfd..8a9a88ea8 100644
--- a/jam-ui/src/components/client/JKSessionBackingTrack.js
+++ b/jam-ui/src/components/client/JKSessionBackingTrack.js
@@ -62,49 +62,7 @@ const JKSessionBackingTrack = ({
     <div className={trackClasses}>
       <div className="disabled-track-overlay" />
       <div className="session-track-contents">
-        {/* Backing Track Header with Close Icon */}
-        <div className="name" style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          fontWeight: 'bold',
-          color: '#495057',
-          marginBottom: '8px'
-        }}>
-          <span>Backing Track</span>
-          <a
-            href="#"
-            onClick={(e) => {
-              e.preventDefault();
-              handleClose();
-            }}
-            style={{
-              color: '#6c757d',
-              textDecoration: 'none',
-              fontSize: '1.2em',
-              cursor: 'pointer'
-            }}
-            title="Close Backing Track"
-          >
-            <FontAwesomeIcon icon={faTimes} />
-          </a>
-        </div>
-
-        {/* File Name - centered where user name would be */}
-        <div style={{
-          textAlign: 'center',
-          fontSize: '14px',
-          color: '#495057',
-          marginBottom: '8px',
-          wordWrap: 'break-word',
-          lineHeight: '1.2',
-          minHeight: '40px', // Space for avatar area
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }}>
-          {getFileName(backingTrack)}
-        </div>
+        {/* Track display - header removed, now shown in parent */}
 
         {/* Instrument Icon */}
         <div
diff --git a/jam-ui/src/components/client/JKSessionScreen.js b/jam-ui/src/components/client/JKSessionScreen.js
index f54db68ae..8840b3d60 100644
--- a/jam-ui/src/components/client/JKSessionScreen.js
+++ b/jam-ui/src/components/client/JKSessionScreen.js
@@ -1102,6 +1102,21 @@ const JKSessionScreen = () => {
             <>
               <div style={{ borderLeft: '1px solid #ddd', paddingLeft: '1rem' }}></div>
               <div className='backingTrack'>
+                <h5>
+                  Backing Track: {mixerHelper.backingTracks[0].shortFilename || 'Audio File'}
+                  <a
+                    href="#"
+                    className="text-muted ml-2"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleBackingTrackMainClose();
+                    }}
+                    style={{ fontSize: '1.2em', textDecoration: 'none' }}
+                    title="Close Backing Track"
+                  >
+                    <FontAwesomeIcon icon="times" /> Close
+                  </a>
+                </h5>
                 <JKSessionBackingTrack
                   backingTrack={mixerHelper.backingTracks[0]}
                   mixers={mixerHelper.backingTracks[0].mixers}