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