From 113efcf583bc18ca5ea62178f189626cd5d7c0ae Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Mon, 27 Apr 2026 12:57:34 +0200
Subject: [PATCH] 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
---
 .../modals/settingsPanels/DesktopPanel.tsx    | 23 ++++++++++++-------
 packages/web/src/components/ui/Toggle.tsx     |  6 +++--
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/web/src/components/modals/settingsPanels/DesktopPanel.tsx b/packages/web/src/components/modals/settingsPanels/DesktopPanel.tsx
index afb8ce2e..57bad547 100644
--- a/packages/web/src/components/modals/settingsPanels/DesktopPanel.tsx
+++ b/packages/web/src/components/modals/settingsPanels/DesktopPanel.tsx
@@ -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>
     </>
   );
diff --git a/packages/web/src/components/ui/Toggle.tsx b/packages/web/src/components/ui/Toggle.tsx
index db6a8f86..3745c2f8 100644
--- a/packages/web/src/components/ui/Toggle.tsx
+++ b/packages/web/src/components/ui/Toggle.tsx
@@ -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 ${