From b5f5e1628e1f9f278b2e5bf8c5bd41f85d9487e0 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Sun, 17 May 2026 13:09:34 -0700
Subject: [PATCH] fix: hide zoom level option in piano roll window's sheet
 music view

---
 .../piano-roll/PianoRollToolbar.test.tsx      | 13 ++++++
 .../piano-roll/PianoRollToolbar.tsx           | 46 ++++++++++---------
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/components/piano-roll/PianoRollToolbar.test.tsx b/src/components/piano-roll/PianoRollToolbar.test.tsx
index 8e16cf5..7e50a4f 100644
--- a/src/components/piano-roll/PianoRollToolbar.test.tsx
+++ b/src/components/piano-roll/PianoRollToolbar.test.tsx
@@ -130,10 +130,23 @@ describe('PianoRollToolbar', () => {
     expect(screen.getByRole('button', { name: 'Sheet Music View' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /16,48/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Show Entire Track' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: '1x' })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Pointer Tool' })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /Pitch Bend/i })).not.toBeInTheDocument();
   });
 
+  it('shows the zoom button outside sheet mode', () => {
+    render(
+      <PianoRollToolbar
+        {...baseProps}
+        sheetMusicViewEnabled={false}
+        mode="midi-edit"
+      />
+    );
+
+    expect(screen.getByRole('button', { name: '1x' })).toBeInTheDocument();
+  });
+
   it('toggles the full-track sheet scope button', () => {
     const onSheetMusicTrackScopeToggle = vi.fn();
 
diff --git a/src/components/piano-roll/PianoRollToolbar.tsx b/src/components/piano-roll/PianoRollToolbar.tsx
index b9b6df0..3e8d8c5 100644
--- a/src/components/piano-roll/PianoRollToolbar.tsx
+++ b/src/components/piano-roll/PianoRollToolbar.tsx
@@ -256,28 +256,30 @@ const PianoRollToolbar: React.FC<PianoRollToolbarProps> = ({
           </div>
         )}
 
-        <div className="quant-dropdown-container" ref={zoomSliderRef}>
-          <button
-            className="quant-button"
-            onClick={() => setShowZoomSlider(!showZoomSlider)}
-            title="Zoom"
-          >
-            {zoom}x
-          </button>
-          {showZoomSlider && (
-            <div className="piano-roll-zoom-popup">
-              <input
-                type="range"
-                min="1"
-                max="8"
-                step="1"
-                value={zoom}
-                onChange={(e) => onZoomChange(parseInt(e.target.value))}
-              />
-              <span className="piano-roll-zoom-value">{zoom}x</span>
-            </div>
-          )}
-        </div>
+        {!sheetMusicViewEnabled && (
+          <div className="quant-dropdown-container" ref={zoomSliderRef}>
+            <button
+              className="quant-button"
+              onClick={() => setShowZoomSlider(!showZoomSlider)}
+              title="Zoom"
+            >
+              {zoom}x
+            </button>
+            {showZoomSlider && (
+              <div className="piano-roll-zoom-popup">
+                <input
+                  type="range"
+                  min="1"
+                  max="8"
+                  step="1"
+                  value={zoom}
+                  onChange={(e) => onZoomChange(parseInt(e.target.value))}
+                />
+                <span className="piano-roll-zoom-value">{zoom}x</span>
+              </div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );