LingandRX
2c45ddada9
The project was calling toast.success/error/warning from sonner in 7 files, but the <Toaster> component was never rendered in the React tree. This meant sonner stored toast data internally but no UI was ever displayed to users. Changes: - Create src/components/ui/sonner.tsx with shadcn/ui-style Toaster wrapper that integrates with ThemeModeProvider for light/dark theme support - Add <Toaster /> to AppRoot.tsx so it works across all entry points (popup, sidepanel, browser-tab) fix: always convert dots to underscores in i18n t() key lookup The t() function only converted dots to underscores when the key contained a colon (namespace:key format). Keys using dot notation like 'messages.copySuccess' were passed directly to chrome.i18n.getMessage() without dot-to-underscore conversion, causing lookups to fail silently and return empty strings - resulting in toast notifications with no text. Now all separators (both ':' and '.') are consistently converted to '_' regardless of format, matching the messages.json key convention. fix: position toast at bottom-center instead of bottom-right
27 lines
873 B
TypeScript
27 lines
873 B
TypeScript
import { Toaster as Sonner } from 'sonner';
|
|
import { useThemeMode } from '@/providers/ThemeModeProvider';
|
|
|
|
type ToasterProps = React.ComponentProps<typeof Sonner>;
|
|
|
|
export function Toaster(props: ToasterProps) {
|
|
const { resolvedMode } = useThemeMode();
|
|
|
|
return (
|
|
<Sonner
|
|
theme={resolvedMode}
|
|
className="toaster group"
|
|
position="bottom-center"
|
|
toastOptions={{
|
|
classNames: {
|
|
toast:
|
|
'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
|
|
description: 'group-[.toast]:text-muted-foreground',
|
|
actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
|
|
cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
|
|
},
|
|
}}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|