Toast Refactor

[mirmirmirr]

This pull request refactors the toast notification system to use a single, unified BaseToast component instead of separate components for each toast type. It also introduces a more flexible toast data structure, centralizes icon and style logic, and updates the copy-to-clipboard toast to use a new type. Some minor dependency and animation improvements are also included.

Toast system refactor and improvements:

• Introduced a new BaseToast component that handles rendering and styling for all toast types, replacing the previous SuccessToast and ErrorToast components. This centralizes toast presentation logic and makes it easier to add new toast types. [1] [2] [3]
• Updated the toast provider to use a more flexible ToastData type, now supporting an open state and a generic type field. Toast icon and style are now determined by helper functions based on the toast type, allowing for easy extension. [1] [2] [3]
• Changed the toast removal logic to first set the toast's open state to false, then remove it after a short delay, enabling smoother exit animations.
• Updated the toast context to use the new ToastData type from a dedicated type file for consistency.

Copy-to-clipboard toast updates:

• Renamed CopyToast to CopyToastButton and changed the toast type from "success" to "copy", which now uses a distinct icon and style. Updated all usages accordingly. [1] [2] src/app/(event)/[event-code]/page-client.tsxL8-R8, src/app/(event)/[event-code]/page-client.tsxL63-R63, src/app/(event)/[event-code]/painting/page-client.tsxL7-R7, src/app/(event)/[event-code]/painting/page-client.tsxL112-R112)

Styling and animation improvements:

• Improved toast exit and swipe animations by introducing a new slideOut keyframe and updating animation timing for a smoother user experience. [1] [2] [3]

Dependency update:

• Updated @radix-ui/react-toast to version 1.2.15.

[Copilot]

Pull Request Overview

This PR refactors the toast notification system to consolidate multiple toast component types into a single BaseToast component with configurable styles and icons. The refactoring improves code maintainability by eliminating duplication and adds a new "copy" toast type alongside existing "error" and "success" types.

Key changes:

• Consolidated ErrorToast and SuccessToast components into a single BaseToast component
• Added new CSS animation slideOut for improved exit transitions
• Updated toast data model to include an open state property for better animation control
• Renamed CopyToast component to CopyToastButton for clarity

Reviewed Changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/styles/tailwind.css	Added slideOut animation and fixed syntax error in slideDownAndFade keyframe; updated swipeOut timing function
src/features/toast/type.ts	Created new file with ToastData type definition, moved from context file
src/features/toast/provider.tsx	Refactored to use BaseToast component with helper functions for icons and styles; updated toast removal logic to support exit animations
src/features/toast/context.ts	Moved ToastData type to separate type file
src/features/toast/components/success.tsx	Deleted file - functionality consolidated into BaseToast
src/features/toast/components/error.tsx	Deleted file - functionality consolidated into BaseToast
src/features/toast/base.tsx	Created new unified toast component with configurable styles, icons, and close button
src/components/copy-toast-button.tsx	Renamed from CopyToast to CopyToastButton; changed toast type to "copy"
src/app/(event)/[event-code]/painting/page-client.tsx	Updated import to use renamed CopyToastButton component
src/app/(event)/[event-code]/page-client.tsx	Updated import to use renamed CopyToastButton component
package.json	Updated @radix-ui/react-toast from ^1.2.14 to ^1.2.15
package-lock.json	Updated dependency lockfile for @radix-ui/react-toast upgrade

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.