peter
70bda98868
Root-fixes the opacity-modifier seed bug behind R10 S0: the theme colors were bare `var(--x)` hex with no <alpha-value>, so `bg-accent/40`, `ring-accent/40`, `border-border/60`, `text-muted/70`, … (~99 sites across 45 files) emitted no CSS rule at all — latent no-ops. v4 implements the opacity modifier via `color-mix`, so the modifier now works with the existing hex vars, no per-scheme token duplication needed. - `npx @tailwindcss/upgrade`: `@tailwind` directives → `@import "tailwindcss"`, JS config → CSS `@theme` (colors, --font-sans, the z-index tokens preserved), classname renames (rounded/shadow/blur scale, outline-none→outline-hidden, ring→ring-2) across 56 files; PostCSS plugin → @tailwindcss/postcss, autoprefixer removed (v4 prefixes for you). - `@theme` → `@theme inline` (load-bearing): the color vars are redefined at runtime under html[data-scheme]/[data-theme]; inline resolves them at the use site so per-scheme opacity tints track the active scheme (the shadcn v4 pattern). - Revert one codemod false-positive: it rewrote the English word "rounded" → "rounded-sm" inside a releaseNotes.ts prose sentence. Gate green: tsc(app+node) / eslint 0-err / prettier / vitest 79 / knip. Verified in-browser: bg-accent/15 now computes a scheme-tracking color at 0.15 alpha across all 6 schemes × 2 themes; the hand-rolled glass border/shadow/ radius/backdrop-filter render unchanged under v4.
80 lines
3.5 KiB
TypeScript
80 lines
3.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 (
|
||
// Stable, always-mounted polite live region — a polite region must PRE-EXIST in the DOM for a
|
||
// screen reader to announce content later inserted into it (a region created together with its
|
||
// first message is unreliably announced). `aria-live` (not role="status") on purpose:
|
||
// role="status" implies aria-atomic="true", which would re-read the WHOLE stack on every toast;
|
||
// aria-live defaults atomic=false, so only the newly-added toast is spoken. Error/fatal toasts
|
||
// additionally carry role="alert", which announces assertively on insertion regardless.
|
||
<div
|
||
aria-live="polite"
|
||
className="absolute bottom-4 left-4 z-overlay flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]"
|
||
>
|
||
{toasts.map((toast) => {
|
||
const { icon: Icon, color, bar } = LEVEL_STYLE[toast.level];
|
||
const urgent = toast.level === "error" || toast.level === "fatal";
|
||
return (
|
||
<div
|
||
key={toast.id}
|
||
role={urgent ? "alert" : undefined}
|
||
className="toast-card 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 wrap-break-word">
|
||
{toast.message}
|
||
{toast.repeat > 1 && (
|
||
<span className="ml-1.5 align-middle text-[11px] font-semibold text-muted tabular-nums">
|
||
×{toast.repeat}
|
||
</span>
|
||
)}
|
||
</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>
|
||
);
|
||
}
|