[Feature]: Add close button to toasts for accessibility and easier dismissal #1832

Before submitting

• I searched existing issues and did not find a duplicate.
• I am describing a concrete problem or use case, not just a vague idea.

Area

apps/web

Problem or use case

Toasts can currently only be dismissed by swiping (or waiting for auto-dismiss). There is no visible close button.

This would be a small, additive change to apps/web/src/components/ui/toast.tsx with no impact on the existing swipe behavior or auto-dismiss logic.

Proposed solution

Add a <Toast.Close> button (the primitive already exists in @base-ui/react) to the toast content area. A small X icon in the top-right corner, styled consistently with the existing CopyErrorButton — low-opacity by default, full opacity on hover.

Why this matters

Accessibility: Keyboard and screen reader users have no way to manually dismiss a toast.
Discoverability: Desktop mouse users typically expect an X button on dismissable notifications. Swipe-to-dismiss is a mobile pattern that isn't obvious on desktop.
Convenience: Having to click-drag across the toast to dismiss feels heavier than clicking a small button.

Smallest useful scope

Aligns with WCAG 2.1 dismissable content guidance
Standard UX convention for toast/notification components
The building block (Toast.Close) is already available in the UI library — no new dependencies
Happy to submit a PR if this sounds reasonable.

Alternatives considered

No response

Risks or tradeoffs

No response

Examples or references

No response

Contribution

• I would be open to helping implement this.