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:
@@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -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 ${
|
||||
|
||||
Reference in New Issue
Block a user