diff --git a/web/src/features/token/create-token-dialog.tsx b/web/src/features/token/create-token-dialog.tsx index d23e9959..864a2112 100644 --- a/web/src/features/token/create-token-dialog.tsx +++ b/web/src/features/token/create-token-dialog.tsx @@ -14,7 +14,7 @@ import { import { Button } from '@/shared/ui/button' import { Input } from '@/shared/ui/input' import { Label } from '@/shared/ui/label' -import { toast } from '@/shared/lib/toast' +import { centeredToastOptions, toast } from '@/shared/lib/toast' import type { CreateTokenRequest, CreateTokenResponse } from '@/api/types' interface CreateTokenDialogProps { @@ -78,22 +78,10 @@ export function CreateTokenDialog({ children, existingNames = [] }: CreateTokenD try { await navigator.clipboard.writeText(createdToken.token) - toast.success(t('createToken.copySuccess'), undefined, { - position: 'top-center', - classNames: { - title: 'text-center font-semibold', - description: 'text-center', - }, - }) + toast.success(t('createToken.copySuccess'), undefined, centeredToastOptions()) } catch (error) { console.error('Failed to copy token:', error) - toast.error(t('createToken.copyFailed'), undefined, { - position: 'top-center', - classNames: { - title: 'text-center font-semibold', - description: 'text-center', - }, - }) + toast.error(t('createToken.copyFailed'), undefined, centeredToastOptions()) } } diff --git a/web/src/shared/components/toaster.tsx b/web/src/shared/components/toaster.tsx index 68fe8e35..42ae8df6 100644 --- a/web/src/shared/components/toaster.tsx +++ b/web/src/shared/components/toaster.tsx @@ -1,22 +1,42 @@ import { Toaster as Sonner } from 'sonner' +import { CENTER_TOASTER_ID } from '@/shared/lib/toast' export function Toaster() { return ( - + <> + + + ) } diff --git a/web/src/shared/lib/toast.ts b/web/src/shared/lib/toast.ts index a4c9f7f1..ce2a09e0 100644 --- a/web/src/shared/lib/toast.ts +++ b/web/src/shared/lib/toast.ts @@ -1,5 +1,19 @@ import { toast as sonnerToast, type ExternalToast } from 'sonner' +export const CENTER_TOASTER_ID = 'top-center' + +export function centeredToastOptions(options?: ExternalToast): ExternalToast { + return { + toasterId: CENTER_TOASTER_ID, + classNames: { + title: 'text-center font-semibold', + description: 'text-center', + ...options?.classNames, + }, + ...options, + } +} + export const toast = { success: (message: string, description?: string, options?: ExternalToast) => { sonnerToast.success(message, { description, ...options })