fix(web): drop optimistic updates and disable inert Start-minimized toggle

- AutoLaunchSettings: remove pre-await state writes; backend response is
  now the sole writer to openAtLogin/startMinimized state, eliminating
  the flicker caused when optimistic values diverged from OS truth
- Add busy flag across IPC round-trip; both Toggles receive disabled={busy}
- Start-minimized Toggle additionally receives disabled={!openAtLogin},
  preventing interaction when it would have no effect
- Toggle.tsx: add optional disabled prop (forwarded to <button disabled>)
  with cursor-not-allowed opacity-50 visual feedback; non-breaking for
  all existing callers
This commit is contained in:
Jannis Braun
2026-04-27 12:57:34 +02:00
parent 962b669cac
commit 113efcf583
2 changed files with 19 additions and 10 deletions
@@ -5,6 +5,7 @@ function AutoLaunchSettings() {
const [openAtLogin, setOpenAtLogin] = useState(false); const [openAtLogin, setOpenAtLogin] = useState(false);
const [startMinimized, setStartMinimized] = useState(true); const [startMinimized, setStartMinimized] = useState(true);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [busy, setBusy] = useState(false);
useEffect(() => { useEffect(() => {
window.backspace?.getAutoLaunchSettings().then((settings) => { window.backspace?.getAutoLaunchSettings().then((settings) => {
@@ -15,24 +16,30 @@ function AutoLaunchSettings() {
}, []); }, []);
const handleOpenAtLoginChange = async (enabled: boolean) => { const handleOpenAtLoginChange = async (enabled: boolean) => {
setOpenAtLogin(enabled); if (busy) return;
setBusy(true);
try { try {
const result = await window.backspace!.setAutoLaunchSettings({ openAtLogin: enabled }); const result = await window.backspace!.setAutoLaunchSettings({ openAtLogin: enabled });
setOpenAtLogin(result.openAtLogin); setOpenAtLogin(result.openAtLogin);
setStartMinimized(result.startMinimized); setStartMinimized(result.startMinimized);
} catch { } catch (err) {
setOpenAtLogin(!enabled); console.error('[autoLaunch] setAutoLaunchSettings(openAtLogin) failed:', err);
} finally {
setBusy(false);
} }
}; };
const handleStartMinimizedChange = async (enabled: boolean) => { const handleStartMinimizedChange = async (enabled: boolean) => {
setStartMinimized(enabled); if (busy) return;
setBusy(true);
try { try {
const result = await window.backspace!.setAutoLaunchSettings({ startMinimized: enabled }); const result = await window.backspace!.setAutoLaunchSettings({ startMinimized: enabled });
setOpenAtLogin(result.openAtLogin); setOpenAtLogin(result.openAtLogin);
setStartMinimized(result.startMinimized); setStartMinimized(result.startMinimized);
} catch { } catch (err) {
setStartMinimized(!enabled); console.error('[autoLaunch] setAutoLaunchSettings(startMinimized) failed:', err);
} finally {
setBusy(false);
} }
}; };
@@ -47,7 +54,7 @@ function AutoLaunchSettings() {
Automatically launch Backspace when you log in Automatically launch Backspace when you log in
</div> </div>
</div> </div>
<Toggle enabled={openAtLogin} onChange={handleOpenAtLoginChange} /> <Toggle enabled={openAtLogin} onChange={handleOpenAtLoginChange} disabled={busy} />
</div> </div>
<div className="flex items-center justify-between py-1"> <div className="flex items-center justify-between py-1">
<div className="flex-1 mr-4"> <div className="flex-1 mr-4">
@@ -56,7 +63,7 @@ function AutoLaunchSettings() {
Start hidden in the system tray instead of showing the window Start hidden in the system tray instead of showing the window
</div> </div>
</div> </div>
<Toggle enabled={startMinimized} onChange={handleStartMinimizedChange} /> <Toggle enabled={startMinimized} onChange={handleStartMinimizedChange} disabled={busy || !openAtLogin} />
</div> </div>
</> </>
); );
+4 -2
View File
@@ -1,16 +1,18 @@
interface ToggleProps { interface ToggleProps {
enabled: boolean; enabled: boolean;
onChange: (enabled: boolean) => void; onChange: (enabled: boolean) => void;
disabled?: boolean;
} }
export function Toggle({ enabled, onChange }: ToggleProps) { export function Toggle({ enabled, onChange, disabled }: ToggleProps) {
return ( return (
<button <button
type="button" type="button"
onClick={() => onChange(!enabled)} onClick={() => onChange(!enabled)}
disabled={disabled}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${ className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
enabled ? 'bg-accent-primary' : 'bg-interactive-muted' enabled ? 'bg-accent-primary' : 'bg-interactive-muted'
}`} }${disabled ? ' cursor-not-allowed opacity-50' : ''}`}
> >
<span <span
className={`inline-block h-4 w-4 rounded-full bg-white transition-transform ${ className={`inline-block h-4 w-4 rounded-full bg-white transition-transform ${