ea317c0009
Feed, VideoCard, Sidebar, PlayerModal, Channels, Stats, SettingsPanel, OnboardingWizard, NotificationCenter, Toaster, ErrorBoundary and the relativeTime helper are now fully translated in Hungarian, English and German, each with its own locale area file (auto-loaded). Key parity verified across all three languages.
76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
import { useSyncExternalStore } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
AlertCircle,
|
|
AlertTriangle,
|
|
CheckCircle2,
|
|
Info,
|
|
X,
|
|
XCircle,
|
|
} from "lucide-react";
|
|
import {
|
|
dismiss,
|
|
getActiveToasts,
|
|
subscribe,
|
|
type NotifLevel,
|
|
} from "../lib/notifications";
|
|
|
|
export const LEVEL_STYLE: Record<
|
|
NotifLevel,
|
|
{ icon: typeof Info; color: string; bar: string }
|
|
> = {
|
|
info: { icon: Info, color: "text-accent", bar: "bg-accent" },
|
|
success: { icon: CheckCircle2, color: "text-emerald-400", bar: "bg-emerald-400" },
|
|
warning: { icon: AlertTriangle, color: "text-amber-400", bar: "bg-amber-400" },
|
|
error: { icon: AlertCircle, color: "text-red-400", bar: "bg-red-400" },
|
|
fatal: { icon: XCircle, color: "text-red-500", bar: "bg-red-500" },
|
|
};
|
|
|
|
export default function Toaster() {
|
|
const { t } = useTranslation();
|
|
const toasts = useSyncExternalStore(subscribe, getActiveToasts, getActiveToasts);
|
|
|
|
return (
|
|
<div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]">
|
|
{toasts.map((toast) => {
|
|
const { icon: Icon, color, bar } = LEVEL_STYLE[toast.level];
|
|
return (
|
|
<div
|
|
key={toast.id}
|
|
className="glass relative overflow-hidden rounded-xl px-3 py-3 flex items-start gap-3 animate-[popIn_0.16s_ease]"
|
|
>
|
|
<Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} />
|
|
<div className="min-w-0 flex-1">
|
|
{toast.title && <div className="text-sm font-semibold">{toast.title}</div>}
|
|
<div className="text-sm break-words">{toast.message}</div>
|
|
{toast.action && (
|
|
<button
|
|
onClick={() => {
|
|
toast.action!.onClick();
|
|
dismiss(toast.id);
|
|
}}
|
|
className="mt-1 text-accent text-sm font-semibold hover:underline"
|
|
>
|
|
{toast.action.label}
|
|
</button>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={() => dismiss(toast.id)}
|
|
className="shrink-0 text-muted hover:text-fg"
|
|
title={t("notifications.dismiss")}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
{toast.duration && (
|
|
<div
|
|
className={`absolute left-0 bottom-0 h-0.5 w-full origin-left ${bar}`}
|
|
style={{ animation: `toastbar ${toast.duration}ms linear forwards` }}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|