feat: added waveform view for audio regions

src/components/piano-roll/PianoRoll.css

@@ -181,6 +181,13 @@
   line-height: 1;
 }
 
+.piano-roll-toolbar .spectrogram-view-icon {
+  width: 12px;
+  height: 12px;
+  overflow: visible;
+  flex-shrink: 0;
+}
+
 .piano-roll-toolbar .tool-button:hover {
   --toolbar-button-bg: #3a3a3a;
   --toolbar-button-fg: #e0e0e0;
@@ -467,6 +474,11 @@
   cursor: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 6h8l-4 4-4-4z' fill='%23e0e0e0'/%3e%3c/svg%3e") 8 8, pointer;
 }
 
+.piano-grid-header.no-piano-keys {
+  width: calc(var(--max-number-of-bars) * var(--region-grid-bar-width));
+  padding-left: 0;
+}
+
 .piano-bar-number {
   border-left: 1px solid #3a3a3a;
   padding-left: 10px;
@@ -484,6 +496,11 @@
   width: max-content;
 }
 
+.piano-roll-body.audio-waveform-body {
+  min-height: 0;
+  height: 100%;
+}
+
 .sheet-music-view {
   position: relative;
   flex: 1;
@@ -616,6 +633,16 @@
   z-index: 5;
 }
 
+.piano-roll-body.audio-waveform-body .piano-grid-container {
+  min-height: 0;
+  height: 100%;
+}
+
+.piano-roll-body.audio-waveform-body .piano-grid {
+  min-height: 0;
+  height: 100%;
+}
+
 .piano-octave {
   display: flex;
   flex-direction: column;