fix(toast): center feedback and remove native token tooltip

This commit is contained in:
yun-zhi-ztl 2026-03-15 13:44:07 +08:00
parent 4c91b73592
commit 6786b8a95c
3 changed files with 35 additions and 44 deletions

View file

@ -240,7 +240,7 @@ export function TokenList() {
variant="outline"
size="sm"
onClick={() => handleCopyToken(token.id)}
title={createdTokens[token.id] ? t('token.copy') : t('token.copyUnavailableTitle')}
aria-label={createdTokens[token.id] ? t('token.copy') : t('token.copyUnavailableTitle')}
>
<Copy className="mr-1 h-4 w-4" />
{t('token.copy')}

View file

@ -3,43 +3,27 @@ import { CENTER_TOASTER_ID } from '@/shared/lib/toast'
export function Toaster() {
return (
<>
<Sonner
position="top-right"
toastOptions={{
classNames: {
toast: 'glass-strong border border-border/40',
title: 'text-foreground font-semibold',
description: 'text-muted-foreground',
actionButton: 'bg-primary text-primary-foreground',
cancelButton: 'bg-muted text-muted-foreground',
error: 'border-destructive/40',
success: 'border-emerald-500/40',
warning: 'border-amber-500/40',
info: 'border-blue-500/40',
},
}}
/>
<Sonner
id={CENTER_TOASTER_ID}
position="top-center"
className="!left-1/2 !right-auto !top-4 !-translate-x-1/2"
offset={16}
mobileOffset={16}
toastOptions={{
classNames: {
toast: 'glass-strong mx-auto w-fit max-w-[min(100vw-2rem,32rem)] border border-border/40',
title: 'text-foreground font-semibold text-center',
description: 'text-muted-foreground text-center',
actionButton: 'bg-primary text-primary-foreground',
cancelButton: 'bg-muted text-muted-foreground',
error: 'border-destructive/40',
success: 'border-emerald-500/40',
warning: 'border-amber-500/40',
info: 'border-blue-500/40',
},
}}
/>
</>
<Sonner
id={CENTER_TOASTER_ID}
position="top-center"
className="!left-1/2 !right-auto !top-4 !-translate-x-1/2"
offset={16}
mobileOffset={16}
toastOptions={{
toasterId: CENTER_TOASTER_ID,
classNames: {
toast: 'glass-strong mx-auto w-fit max-w-[min(100vw-2rem,32rem)] border border-border/40',
title: 'text-foreground font-semibold text-center',
description: 'text-muted-foreground text-center',
content: 'w-full text-center',
actionButton: 'bg-primary text-primary-foreground',
cancelButton: 'bg-muted text-muted-foreground',
error: 'border-destructive/40',
success: 'border-emerald-500/40',
warning: 'border-amber-500/40',
info: 'border-blue-500/40',
},
}}
/>
)
}

View file

@ -14,18 +14,25 @@ export function centeredToastOptions(options?: ExternalToast): ExternalToast {
}
}
function withDefaultToaster(options?: ExternalToast): ExternalToast {
return {
toasterId: CENTER_TOASTER_ID,
...options,
}
}
export const toast = {
success: (message: string, description?: string, options?: ExternalToast) => {
sonnerToast.success(message, { description, ...options })
sonnerToast.success(message, { description, ...withDefaultToaster(options) })
},
error: (message: string, description?: string, options?: ExternalToast) => {
sonnerToast.error(message, { description, ...options })
sonnerToast.error(message, { description, ...withDefaultToaster(options) })
},
warning: (message: string, description?: string, options?: ExternalToast) => {
sonnerToast.warning(message, { description, ...options })
sonnerToast.warning(message, { description, ...withDefaultToaster(options) })
},
info: (message: string, description?: string, options?: ExternalToast) => {
sonnerToast.info(message, { description, ...options })
sonnerToast.info(message, { description, ...withDefaultToaster(options) })
},
promise: <T,>(
promise: Promise<T>,
@ -35,6 +42,6 @@ export const toast = {
error: string | ((error: Error) => string)
}
) => {
return sonnerToast.promise(promise, options)
return sonnerToast.promise(promise, { ...options, toasterId: CENTER_TOASTER_ID })
},
}