refactor: Rework Piano Roll controls for mobile responsiveness, adjusting element sizing, visibility, and adding a showAdvanced state.

Author: mreshank

apps/web/src/components/LooperPanel.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { useStore, LoopTrack } from "@/lib/store";
 import { Mic, Play, Square, Trash2, Volume2, VolumeX, Repeat, X, Download } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
@@ -30,9 +30,9 @@ export function LooperPanel() {
                         animate={{ width: "auto", opacity: 1 }}
                         exit={{ width: 0, opacity: 0 }}
                         transition={{ type: "spring", stiffness: 300, damping: 30 }}
-                        className="h-full border-l border-border bg-background/95 backdrop-blur-xl shadow-2xl z-40 bg-background flex flex-col overflow-hidden max-w-[90vw] md:max-w-md"
+                        className="h-full border-l border-border bg-background/95 backdrop-blur-xl shadow-2xl z-40 bg-background flex flex-col overflow-hidden w-full sm:w-auto sm:max-w-md"
                     >
-                        <div className="w-[320px] md:w-80 h-full flex flex-col p-4">
+                        <div className="w-screen sm:w-80 h-full flex flex-col p-4">
                             <div className="flex items-center justify-between mb-6 mt-4">
                                 <h2 className="text-xl font-bold flex items-center gap-2">
                                     <span className="w-3 h-3 rounded-full bg-red-500 animate-pulse" />
@@ -74,6 +74,29 @@ function LoopTrackCard({
     onVolume: (v: number) => void, onMute: () => void
 }) {
     const [showVolume, setShowVolume] = useState(false);
+    const longPressTimer = useRef<NodeJS.Timeout | null>(null);
+    const isLongPress = useRef(false);
+
+    const handleTouchStart = () => {
+        isLongPress.current = false;
+        longPressTimer.current = setTimeout(() => {
+            isLongPress.current = true;
+            setShowVolume(!showVolume);
+        }, 400); // 400ms long press
+    };
+
+    const handleTouchEnd = () => {
+        if (longPressTimer.current) {
+            clearTimeout(longPressTimer.current);
+        }
+    };
+
+    const handleClick = () => {
+        // Only trigger mute if it wasn't a long press
+        if (!isLongPress.current) {
+            onMute();
+        }
+    };
     const isRecording = track.state === "recording";
     const isPlaying = track.state === "playing";
     const hasLoop = track.state !== "empty" && track.state !== "recording";
@@ -137,10 +160,13 @@ function LoopTrackCard({
 
                     {/* Volume Button */}
                     <button
-                        onClick={onMute}
+                        onClick={handleClick}
                         onContextMenu={(e) => { e.preventDefault(); setShowVolume(!showVolume); }}
-                        className={`w-8 h-8 rounded-full border border-border flex items-center justify-center transition-all ${track.muted ? "bg-destructive/20 text-destructive border-destructive/50" : "bg-background hover:bg-muted text-muted-foreground"}`}
-                        title="Left-Click: Mute | Right-Click: Volume"
+                        onTouchStart={handleTouchStart}
+                        onTouchEnd={handleTouchEnd}
+                        onTouchCancel={handleTouchEnd}
+                        className={`w-8 h-8 rounded-full border border-border flex items-center justify-center transition-all touch-manipulation ${track.muted ? "bg-destructive/20 text-destructive border-destructive/50" : "bg-background hover:bg-muted text-muted-foreground"}`}
+                        title="Tap: Mute | Hold/Right-Click: Volume"
                     >
                         {track.muted ? <VolumeX size={14} /> : <Volume2 size={14} />}
                     </button>

apps/web/src/components/MiniKeyboard.tsx

@@ -20,20 +20,20 @@ const OSCILLATORS: { type: SynthParams['oscillatorType']; label: string }[] = [
 
 // Reusable Knob Component (Vertical Range Slider styled as Knob-ish or Slider)
 const Slider = ({
-    label, value, min, max, step, onChange, unit = ""
+    label, value, min, max, step, onChange, unit = "", horizontal
 }: {
-    label: string, value: number, min: number, max: number, step: number, onChange: (v: number) => void, unit?: string
+    label: string, value: number, min: number, max: number, step: number, onChange: (v: number) => void, unit?: string, horizontal?: boolean
 }) => (
-    <div className="flex flex-col items-center gap-2 group">
-        <div className="h-28 bg-muted/30 rounded-full p-1 relative w-8 flex justify-center">
+    <div className={horizontal ? "flex flex-row items-center gap-2 group" : "flex flex-col items-center gap-2 group"}>
+        <div className={horizontal ? "h-8 bg-muted/30 rounded-full p-1 relative w-28 flex justify-center" : "h-28 bg-muted/30 rounded-full p-1 relative w-8 flex justify-center"}>
             <input
                 type="range"
                 min={min}
                 max={max}
                 step={step}
                 value={value}
                 onChange={(e) => onChange(parseFloat(e.target.value))}
-                className="[-webkit-appearance:slider-vertical] w-full h-full opacity-50 group-hover:opacity-100 transition-opacity cursor-pointer accent-primary"
+                className={horizontal ? "[-webkit-appearance:slider-horizontal] w-full h-full opacity-50 group-hover:opacity-100 transition-opacity cursor-pointer accent-primary" : "[-webkit-appearance:slider-vertical] w-full h-full opacity-50 group-hover:opacity-100 transition-opacity cursor-pointer accent-primary"}
             />
         </div>
         <div className="text-center">
@@ -100,7 +100,7 @@ export function MiniKeyboard() {
     return (
         <div className="flex flex-col gap-4 h-full select-none">
             {/* Synth Engine Panel */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-muted/10 rounded-xl border border-border relative overflow-hidden">
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 p-4 bg-muted/10 rounded-xl border border-border relative overflow-hidden">
                 <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent pointer-events-none"></div>
 
                 {/* 1. Oscillator */}
@@ -151,15 +151,15 @@ export function MiniKeyboard() {
                     <div className="flex items-center gap-2 text-xs font-bold text-muted-foreground">
                         <Zap size={14} /> FILTER & FX
                     </div>
-                    <div className="flex justify-between">
+                    <div className="flex flex-col md:flex-row justify-between">
                         <Slider label="FREQ" value={synthParams.filterCutoff} min={20} max={20000} step={100} onChange={(v) => {
                             setSynthParam("filterCutoff", v);
                             useStore.getState().setMasterEffect("filterFreq", v);
-                        }} unit="Hz" />
+                        }} unit="Hz" horizontal />
                         <Slider label="RES" value={synthParams.filterResonance} min={0} max={20} step={0.1} onChange={(v) => {
                             setSynthParam("filterResonance", v);
                             useStore.getState().setMasterEffect("filterRes", v);
-                        }} />
+                        }} horizontal />
                     </div>
                 </div>
             </div>