diff --git a/frontend-react/src/App.jsx b/frontend-react/src/App.jsx index 2df707c..4145032 100644 --- a/frontend-react/src/App.jsx +++ b/frontend-react/src/App.jsx @@ -458,13 +458,25 @@ function SlidePanel({ children, onClose }) { // ══════════════════════════════════════════════════════════════ // 1. RIG SCREEN ──────────────────────────────────────────────── -function RigScreen({ state, connected }) { +function RigScreen({ state, connected, refresh }) { const [volume, setVolume] = useState(state?.master_volume != null ? Math.round(state.master_volume * 100) : 80); + // Optimistic local states so toggles respond immediately + const [localBypass, setLocalBypass] = useState(null); + const [localTuner, setLocalTuner] = useState(null); + + const bypass = localBypass ?? state?.bypass ?? false; + const tuner = localTuner ?? state?.tuner_enabled ?? false; useEffect(() => { if (state?.master_volume != null) setVolume(Math.round(state.master_volume * 100)); }, [state?.master_volume]); + // Sync optimistic states from server when they arrive + useEffect(() => { + if (state?.bypass !== undefined) setLocalBypass(null); + if (state?.tuner_enabled !== undefined) setLocalTuner(null); + }, [state?.bypass, state?.tuner_enabled]); + const handleVolume = async (val) => { setVolume(val); try { @@ -473,16 +485,19 @@ function RigScreen({ state, connected }) { }; const handleBypass = async () => { + const next = !bypass; + setLocalBypass(next); try { - await apiPost('/api/bypass'); - } catch (e) { /* ignore */ } + await apiPost('/api/bypass', { bypass: next }); + } catch (e) { setLocalBypass(null); } }; const handleTuner = async () => { + const next = !tuner; + setLocalTuner(next); try { - const current = state?.tuner_enabled; - await apiPost('/api/tuner', { enabled: !current }); - } catch (e) { /* ignore */ } + await apiPost('/api/tuner', { enabled: next }); + } catch (e) { setLocalTuner(null); } }; // Real audio levels from the pipeline (0-100 scale, updated every poll cycle) @@ -518,18 +533,28 @@ function RigScreen({ state, connected }) { {/* Status row */}