fix(desktop): distinguish update toast dismissal from eviction

Author: waleedlatif1

.github/workflows/desktop-e2e.yml

@@ -11,6 +11,7 @@ on:
       - '.github/workflows/desktop-release.yml'
       - 'apps/desktop/**'
       - 'apps/sim/app/_shell/desktop-update-*.tsx'
+      - 'apps/sim/app/layout.tsx'
       - 'apps/sim/hooks/use-desktop-update-state.ts'
       - 'apps/sim/lib/desktop/**'
       - 'apps/sim/app/workspace/**/browser-session/**'

apps/desktop/e2e/fixtures/update-notification.tsx

@@ -1,5 +1,5 @@
 import { type ComponentType, StrictMode, useState } from 'react'
-import { Chip, ChipInput, ToastProvider } from '@sim/emcn'
+import { Chip, ChipInput, ToastProvider, toast } from '@sim/emcn'
 import { PathnameContext } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'
 import { createRoot } from 'react-dom/client'
 
@@ -16,6 +16,16 @@ function UpdateNotificationFixture({ Notification }: UpdateNotificationFixturePr
         <main className='flex flex-col gap-[16px] p-[48px]'>
           <ChipInput aria-label='Work in progress' placeholder='Keep working' />
           <Chip onClick={() => setPathname('/workspace/second')}>Switch workspace</Chip>
+          <Chip
+            onClick={() => {
+              for (let index = 0; index < 3; index++) {
+                toast({ message: `Background task ${index + 1}`, duration: 0 })
+              }
+            }}
+          >
+            Fill notification stack
+          </Chip>
+          <Chip onClick={() => toast.dismissAll()}>Clear notifications</Chip>
           <output aria-label='Current route'>{pathname}</output>
         </main>
       </ToastProvider>

apps/desktop/e2e/password-autofill.spec.ts

@@ -311,6 +311,9 @@ test.describe('saved password autofill', () => {
     await expect
       .poll(() => pageScript('document.getElementById("user").value'))
       .toBe('account9@example.test')
+    await expect
+      .poll(() => app.windows().some((page) => page.url().includes('credential-picker.html')))
+      .toBe(false)
     await clickField()
     await picker()
     await pickerKey('Escape')

apps/desktop/e2e/update-notification.spec.ts

@@ -194,20 +194,40 @@ mountUpdateNotificationFixture(DesktopUpdateNotification);`,
       }
     )
 
+    await check('stack eviction does not count as dismissing the update offer', async () => {
+      await publish({ status: 'checking', version: '2.4.0' })
+      await expect(restart).toHaveCount(0)
+      await publish({ status: 'ready', version: '2.4.0' })
+      await expect(restart).toHaveCount(1)
+      await page.getByRole('button', { name: 'Fill notification stack' }).click()
+      await expect(restart).toHaveCount(0)
+      await page.getByRole('button', { name: 'Clear notifications' }).click()
+      await expect(notice).toHaveCount(0)
+      await publish({ status: 'checking', version: '2.4.0' })
+      await page.evaluate(
+        () =>
+          new Promise<void>((resolve) =>
+            requestAnimationFrame(() => requestAnimationFrame(() => resolve()))
+          )
+      )
+      await publish({ status: 'ready', version: '2.4.0' })
+      await expect(restart).toBeVisible()
+    })
+
     await check('actions reach the real preload IPC with the correct operation', async () => {
       for (const { state, action, channel } of [
         {
-          state: { status: 'ready', version: '2.1.0' },
+          state: { status: 'ready', version: '2.4.0' },
           action: restart,
           channel: 'desktop:updates:install',
         },
         {
-          state: { status: 'available', version: '2.2.0' },
+          state: { status: 'available', version: '2.5.0' },
           action: download,
           channel: 'desktop:updates:check',
         },
         {
-          state: { status: 'available', version: '2.3.0', manual: true },
+          state: { status: 'available', version: '2.6.0', manual: true },
           action: download,
           channel: 'desktop:updates:install',
         },

apps/sim/app/_shell/desktop-update-notification.tsx

@@ -6,8 +6,12 @@ import { getDesktopShellVersion, getDesktopUpdates } from '@/lib/desktop'
 import { isShellOutdated } from '@/lib/desktop/min-version'
 import { useDesktopUpdateState } from '@/hooks/use-desktop-update-state'
 
+interface DesktopUpdateNotificationProps {
+  [key: string]: never
+}
+
 /** Keeps optional desktop updates actionable across routes for the current window session. */
-export function DesktopUpdateNotification() {
+export function DesktopUpdateNotification(_props: DesktopUpdateNotificationProps) {
   const { status, version, manual } = useDesktopUpdateState()
   const { toast, dismiss } = useToast()
   const dismissedOffer = useRef<string | null>(null)
@@ -38,13 +42,13 @@ export function DesktopUpdateNotification() {
         },
       },
       persistAcrossRoutes: true,
-      onDismiss: () => {
+      onUserDismiss: () => {
         if (active) dismissedOffer.current = offer
       },
     })
 
     return () => {
-      // State changes and StrictMode cleanup withdraw the toast without dismissing the offer.
+      // Ignore clicks while a withdrawn toast finishes its exit animation.
       active = false
       dismiss(id)
     }

packages/emcn/src/components/toast/toast.tsx

@@ -100,6 +100,7 @@ interface ToastData {
   duration: number
   persistAcrossRoutes: boolean
   onDismiss?: () => void
+  onUserDismiss?: () => void
 }
 
 interface ToastRemoval {
@@ -174,6 +175,8 @@ type ToastInput = {
   action?: ToastAction
   /** Called once when the toast leaves the stack, regardless of how it was dismissed. */
   onDismiss?: () => void
+  /** Called directly when the user closes the toast or selects its action, before removal. */
+  onUserDismiss?: () => void
   duration?: number
   /**
    * Keep the toast across navigation. The stack is otherwise cleared on every
@@ -374,7 +377,10 @@ function ToastItem({ toast: t, geometry, reduceMotion, onDismiss, onMeasure }: T
     return () => observer.disconnect()
   }, [t.id, onMeasure])
 
-  const dismiss = useCallback(() => onDismiss(t.id), [onDismiss, t.id])
+  const dismiss = () => {
+    t.onUserDismiss?.()
+    onDismiss(t.id)
+  }
 
   const { y, scale, height, zIndex } = geometry
   const cornerRadius = height <= COMPACT_CARD_HEIGHT_PX ? COMPACT_RADIUS_PX : CONCENTRIC_RADIUS_PX
@@ -539,6 +545,7 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
       duration: input.duration ?? (input.action ? 0 : AUTO_DISMISS_MS),
       persistAcrossRoutes: input.persistAcrossRoutes ?? false,
       onDismiss: input.onDismiss,
+      onUserDismiss: input.onUserDismiss,
     }
     dispatch({ type: 'add', toast: data })
     return id