fix: hide zoom level option in piano roll window's sheet music view

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();
 

src/components/piano-roll/PianoRollToolbar.tsx

@@ -256,28 +256,30 @@ const PianoRollToolbar: React.FC<PianoRollToolbarProps> = ({
           </div>
         )}
 
-        <div className="quant-dropdown-container" ref={zoomSliderRef}>
+        {!sheetMusicViewEnabled && (
-          <button
+          <div className="quant-dropdown-container" ref={zoomSliderRef}>
-            className="quant-button"
+            <button
-            onClick={() => setShowZoomSlider(!showZoomSlider)}
+              className="quant-button"
-            title="Zoom"
+              onClick={() => setShowZoomSlider(!showZoomSlider)}
-          >
+              title="Zoom"
-            {zoom}x
+            >
-          </button>
+              {zoom}x
-          {showZoomSlider && (
+            </button>
-            <div className="piano-roll-zoom-popup">
+            {showZoomSlider && (
-              <input
+              <div className="piano-roll-zoom-popup">
-                type="range"
+                <input
-                min="1"
+                  type="range"
-                max="8"
+                  min="1"
-                step="1"
+                  max="8"
-                value={zoom}
+                  step="1"
-                onChange={(e) => onZoomChange(parseInt(e.target.value))}
+                  value={zoom}
-              />
+                  onChange={(e) => onZoomChange(parseInt(e.target.value))}
-              <span className="piano-roll-zoom-value">{zoom}x</span>
+                />
-            </div>
+                <span className="piano-roll-zoom-value">{zoom}x</span>
-          )}
+              </div>
-        </div>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );