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 [startMinimized, setStartMinimized] = useState(true);
const [loading, setLoading] = useState(true);
const [busy, setBusy] = useState(false);
useEffect(() => {
window.backspace?.getAutoLaunchSettings().then((settings) => {
@@ -15,24 +16,30 @@ function AutoLaunchSettings() {
}, []);
const handleOpenAtLoginChange = async (enabled: boolean) => {
setOpenAtLogin(enabled);
if (busy) return;
setBusy(true);
try {
const result = await window.backspace!.setAutoLaunchSettings({ openAtLogin: enabled });
setOpenAtLogin(result.openAtLogin);
setStartMinimized(result.startMinimized);
} catch {
setOpenAtLogin(!enabled);
} catch (err) {
console.error('[autoLaunch] setAutoLaunchSettings(openAtLogin) failed:', err);
} finally {
setBusy(false);
}
};
const handleStartMinimizedChange = async (enabled: boolean) => {
setStartMinimized(enabled);
if (busy) return;
setBusy(true);
try {
const result = await window.backspace!.setAutoLaunchSettings({ startMinimized: enabled });
setOpenAtLogin(result.openAtLogin);
setStartMinimized(result.startMinimized);
} catch {
setStartMinimized(!enabled);
} catch (err) {
console.error('[autoLaunch] setAutoLaunchSettings(startMinimized) failed:', err);
} finally {
setBusy(false);
}
};
@@ -47,7 +54,7 @@ function AutoLaunchSettings() {
Automatically launch Backspace when you log in
</div>
</div>
<Toggle enabled={openAtLogin} onChange={handleOpenAtLoginChange} />
<Toggle enabled={openAtLogin} onChange={handleOpenAtLoginChange} disabled={busy} />
</div>
<div className="flex items-center justify-between py-1">
<div className="flex-1 mr-4">
@@ -56,7 +63,7 @@ function AutoLaunchSettings() {
Start hidden in the system tray instead of showing the window
</div>
</div>
<Toggle enabled={startMinimized} onChange={handleStartMinimizedChange} />
<Toggle enabled={startMinimized} onChange={handleStartMinimizedChange} disabled={busy || !openAtLogin} />
</div>
</>
);
+4 -2
View File
@@ -1,16 +1,18 @@
interface ToggleProps {
enabled: boolean;
onChange: (enabled: boolean) => void;
disabled?: boolean;
}
export function Toggle({ enabled, onChange }: ToggleProps) {
export function Toggle({ enabled, onChange, disabled }: ToggleProps) {
return (
<button
type="button"
onClick={() => onChange(!enabled)}
disabled={disabled}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors flex-shrink-0 ${
enabled ? 'bg-accent-primary' : 'bg-interactive-muted'
}`}
}${disabled ? ' cursor-not-allowed opacity-50' : ''}`}
>
<span
className={`inline-block h-4 w-4 rounded-full bg-white transition-transform ${