6486c3d1a9
- Add a theme-aware glass surface system (.glass/.glass-card + ambient backdrop, performance-mode opt-out) and apply it across panels, popovers, toasts, cards, sidebar widgets, channel rows, video cards and login. - SettingsPanel: slide in/out animation, glass styling, wrapping pill tabs (no horizontal scrollbar) with a prominent active state. - Notifications: auto-dismiss can be switched off (stays until closed); the test notification now also triggers the alert sound; resume a suspended AudioContext. - Add an app-wide, toggleable hint/tooltip system (lib/hints + Tooltip) and wire hints across the settings and channel-manager surfaces; persisted per account.
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import { useSyncExternalStore } from "react";
|
|
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 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((t) => {
|
|
const { icon: Icon, color, bar } = LEVEL_STYLE[t.level];
|
|
return (
|
|
<div
|
|
key={t.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">
|
|
{t.title && <div className="text-sm font-semibold">{t.title}</div>}
|
|
<div className="text-sm break-words">{t.message}</div>
|
|
{t.action && (
|
|
<button
|
|
onClick={() => {
|
|
t.action!.onClick();
|
|
dismiss(t.id);
|
|
}}
|
|
className="mt-1 text-accent text-sm font-semibold hover:underline"
|
|
>
|
|
{t.action.label}
|
|
</button>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={() => dismiss(t.id)}
|
|
className="shrink-0 text-muted hover:text-fg"
|
|
title="Dismiss"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
{t.duration && (
|
|
<div
|
|
className={`absolute left-0 bottom-0 h-0.5 w-full origin-left ${bar}`}
|
|
style={{ animation: `toastbar ${t.duration}ms linear forwards` }}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|