From be3d39bff63f065bb3913e3b89e14ec81c871aa4 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Fri, 16 Jan 2026 19:05:19 +0530
Subject: [PATCH] feat: add metronome track display component

Implements JKSessionMetronome track strip for session screen with:
- Metronome icon with fallback
- Horizontal VU meters (SessionTrackVU)
- Vertical volume fader (SessionTrackGain)
- Close button

Follows JKSessionBackingTrack pattern for consistency.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../components/client/JKSessionMetronome.js   | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 jam-ui/src/components/client/JKSessionMetronome.js

diff --git a/jam-ui/src/components/client/JKSessionMetronome.js b/jam-ui/src/components/client/JKSessionMetronome.js
new file mode 100644
index 000000000..ce75c9810
--- /dev/null
+++ b/jam-ui/src/components/client/JKSessionMetronome.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import { useMixersContext } from '../../context/MixersContext';
+import { useJamClient } from '../../context/JamClientContext';
+import SessionTrackVU from './SessionTrackVU';
+import SessionTrackGain from './SessionTrackGain';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import './JKSessionMyTrack.css';
+
+const JKSessionMetronome = ({
+  mixers,
+  onClose
+}) => {
+  const mixerHelper = useMixersContext();
+  const jamClient = useJamClient();
+
+  console.log('JKSessionMetronome mixers:', mixers);
+
+  const trackClasses = `session-track metronome-track has-mixer`;
+
+  const handleClose = () => {
+    console.log('JKSessionMetronome: Close clicked');
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className={trackClasses}>
+      <div className="disabled-track-overlay" />
+      <div className="session-track-contents">
+        {/* Metronome Icon */}
+        <div
+          className="track-instrument"
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginBottom: '8px'
+          }}
+        >
+          <img
+            height="45"
+            src="/assets/content/icon_metronome.png"
+            width="45"
+            alt="metronome"
+            onError={(e) => {
+              // Fallback if metronome icon doesn't exist
+              e.target.src = "/assets/content/icon_recording.png";
+            }}
+          />
+        </div>
+
+        {/* Controls */}
+        <div className="track-controls">
+          <div className="vu-and-gain" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <SessionTrackVU
+              orientation="horizontal"
+              lightCount={11}
+              lightWidth={17}
+              lightHeight={12}
+              side="best"
+              mixers={mixers}
+            />
+            <SessionTrackGain
+              mixers={mixers?.mixer}
+              gainType="track"
+              controlGroup="track"
+              orientation="vertical"
+            />
+          </div>
+
+          {/* Close Button */}
+          <div className="track-buttons">
+            <div className="track-menu-container">
+              <button
+                className="btn-close-track"
+                onClick={handleClose}
+                title="Close Metronome"
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: '4px 8px',
+                  fontSize: '1.2rem',
+                  color: '#6c757d',
+                  transition: 'color 0.2s'
+                }}
+                onMouseEnter={(e) => e.target.style.color = '#495057'}
+                onMouseLeave={(e) => e.target.style.color = '#6c757d'}
+              >
+                <FontAwesomeIcon icon={faTimes} />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Track Info */}
+        <div className="track-info" style={{ marginTop: '8px', textAlign: 'center' }}>
+          <div className="track-name" style={{ fontSize: '0.875rem', fontWeight: '600', color: '#495057' }}>
+            Metronome
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default JKSessionMetronome;