improvement(toast): match notification styling with countdown ring and consistent design

[waleedlatif1]

Summary

• Restyle toast component to match notification component (240px width, neutral theme, same layout)
• Add countdown ring spinner for timed toasts (reuses notification-countdown keyframe)
• Add error dot indicator matching notification error style
• Remove unused description field from toast types

Type of Change

• Enhancement / improvement

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 20, 2026 6:25am

[cursor]

PR Summary

Low Risk
Low risk UI-only change to the toast component, with a small type/API tweak removing the unused description field that could affect any external callers still passing it.

Overview
Updates the toast component styling to a neutral, notification-matching layout (fixed 240px card, new padding/typography, and action button styling) and replaces variant-based background/border themes with small success/error dot indicators.

Adds an animated SVG countdown ring that appears for timed toasts and removes the description field from ToastInput/ToastData and toast creation.

^{Written by Cursor Bugbot for commit eeebcb8. Configure here.}

[greptile-apps]

Greptile Summary

This PR reskins the toast component to visually match the Notifications panel: 240 px width, neutral border/background tokens, inline 8×8 px colored dot indicators for error/success variants, and a CountdownRing SVG that reuses the existing notification-countdown CSS keyframe for timed toasts. It also removes the description field from ToastData and ToastInput — a clean type simplification confirmed by a scan of all callers (none use description).

Key changes:

• CountdownRing receives duration as a prop and drives the animation duration dynamically, making it more flexible than the notifications counterpart which hardcodes AUTO_DISMISS_MS
• Variant indicators (error, success) are now inline <span> dots before the message text, rendered inside a line-clamp-2 container
• The dismiss button gains an aria-label for improved accessibility
• Action button moves from an inline underlined link style to a full-width block button with --surface-active background, consistent with the notification panel

Confidence Score: 4/5

• This PR is safe to merge — it is a self-contained visual redesign with no logic changes, no breaking API changes for existing callers, and the removed description field was unused across the codebase.
• Score reflects that the change touches only one file, the type simplification (description removal) has no callers, the animation wiring is correct, and the CSS keyframe end-value (34.56) is slightly above RING_CIRCUMFERENCE so the ring is fully hidden at completion. One minor point: the action button inherits text color rather than setting it explicitly, but this is a style nit that doesn't affect correctness.
• No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/components/emcn/components/toast/toast.tsx	Visual redesign of the toast component: 240px neutral-theme layout, new CountdownRing SVG reusing the notification-countdown keyframe, inline variant-dot indicators for error/success, and removal of the unused description field from ToastData/ToastInput. Logic is unchanged; the animation wiring and type cleanup are clean.

Sequence Diagram

sequenceDiagram
    participant Caller
    participant toast as toast() / useToast
    participant ToastProvider
    participant ToastItem
    participant CountdownRing

    Caller->>toast: toast.success("msg", { duration: 5000 })
    toast->>ToastProvider: addToast({ message, variant, duration })
    ToastProvider->>ToastProvider: append ToastData to state
    ToastProvider->>ToastItem: render <ToastItem toast={t} />
    ToastItem->>CountdownRing: render (if t.duration > 0)
    CountdownRing-->>ToastItem: SVG with notification-countdown CSS animation
    ToastItem->>ToastItem: useEffect → setTimeout(dismiss, duration)
    Note over ToastItem,CountdownRing: Ring animation & dismiss timer start together
    ToastItem->>ToastItem: setExiting(true) → toast-exit animation
    ToastItem->>ToastProvider: onDismiss(id) after EXIT_ANIMATION_MS
    ToastProvider->>ToastProvider: filter toast from state

Loading

_{Last reviewed commit: "fix(toast): add succ..."}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR