feat: make toast position configurable (#14405)

### What?

Extends the toast configuration introduced with #13609 to also allow to
configure the toast's positioning.

### Why?

Different users of Payload might prefer different positions. E.g. for
our own implementation we'd prefer a top (central) position, because
we've been having users overlook the toasts in the bottom right due to
usage of large screens, and saving / publishing buttons usually
triggering toasts being placed at the top (meaning the user looks at the
top).

### How?

The `position` configuration is a 1:1 pass-through of the
https://sonner.emilkowal.ski `position` configuration option. The
default remains unchanged compared to the status-quo, at
`'bottom-right'`.

### Screenshots

*`bottom-right`:* Unchanged to current placement.

*`bottom-center`:*

<img width="1283" height="1373" alt="image"
src="https://github.com/user-attachments/assets/ad2716d4-3a8b-467e-be03-80abf0e1233f"
/>

*`bottom-left`:*

<img width="1283" height="1375" alt="image"
src="https://github.com/user-attachments/assets/4f7b1efe-de1a-4a48-be5d-9746ba4e7296"
/>


*`top-left` - questionable, but IMHO that's fine because it's an opt-in
choice.*:

<img width="1276" height="1371" alt="image"
src="https://github.com/user-attachments/assets/ff11e2f5-0aa0-411a-9bcf-01083184a531"
/>

*`top-center`:*

<img width="1285" height="1384" alt="image"
src="https://github.com/user-attachments/assets/603e735f-36f5-4b5a-8e9f-b1c80b2a2907"
/>

*`top-left` - also covers interactive UI, but is therefore very hard to
overlook:*

<img width="1283" height="1370" alt="image"
src="https://github.com/user-attachments/assets/40ecdd57-a9d2-4d47-b8d9-26e64164e1ee"
/>

Author: philipp-tailor

docs/admin/overview.mdx

@@ -341,8 +341,9 @@ The `admin.toast` configuration allows you to customize the handling of toast me
 
 The following options are available for the `admin.toast` configuration:
 
-| Option     | Description                                                                                                      | Default |
-| ---------- | ---------------------------------------------------------------------------------------------------------------- | ------- |
-| `duration` | The length of time (in milliseconds) that a toast message is displayed.                                          | `4000`  |
-| `expand`   | If `true`, will expand the message stack so that all messages are shown simultaneously without user interaction. | `false` |
-| `limit`    | The maximum number of toasts that can be visible on the screen at once.                                          | `5`     |
+| Option     | Description                                                                                                      | Default        |
+| ---------- | ---------------------------------------------------------------------------------------------------------------- | -------------- |
+| `duration` | The length of time (in milliseconds) that a toast message is displayed.                                          | `4000`         |
+| `expand`   | If `true`, will expand the message stack so that all messages are shown simultaneously without user interaction. | `false`        |
+| `limit`    | The maximum number of toasts that can be visible on the screen at once.                                          | `5`            |
+| `position` | The position of the toast on the screen.                                                                         | `bottom-right` |

packages/payload/src/config/types.ts

@@ -987,6 +987,17 @@ export type Config = {
        * @default 5
        */
       limit?: number
+      /**
+       * The position of the toast on the screen.
+       * @default 'bottom-right'
+       */
+      position?:
+        | 'bottom-center'
+        | 'bottom-left'
+        | 'bottom-right'
+        | 'top-center'
+        | 'top-left'
+        | 'top-right'
     }
     /** The slug of a Collection that you want to be used to log in to the Admin dashboard. */
     user?: string

packages/ui/src/providers/ToastContainer/index.tsx

@@ -12,7 +12,7 @@ import { Warning } from './icons/Warning.js'
 export const ToastContainer: React.FC<{
   config: ClientConfig
 }> = ({ config }) => {
-  const { admin: { toast: { duration, expand, limit } = {} } = {} } = config
+  const { admin: { toast: { duration, expand, limit, position } = {} } = {} } = config
 
   return (
     <Toaster
@@ -30,6 +30,7 @@ export const ToastContainer: React.FC<{
         warning: <Warning />,
       }}
       offset="calc(var(--gutter-h) / 2)"
+      position={position ?? 'bottom-right'}
       toastOptions={{
         classNames: {
           closeButton: 'payload-toast-close-button',