feat(ui): notification center with leveled toasts and error capture
- Replace the toast store with a notification store: levels (info/success/ warning/error/fatal), requiresInteraction, and a persisted history. - Move toasts to the top-right, styled per level, with manual dismiss. - Add a bell in the header opening a Notification Center (history, unread badge, 'needs attention' vs info, clear all). - Capture network failures and 5xx responses (api layer) and render crashes (ErrorBoundary) as notifications. - Sound + server-sourced events + per-account settings remain for 6b.
This commit is contained in:
npeter83
parent
01960d3bb7
commit
2c51e4434b
9 changed files with 403 additions and 68 deletions
48
frontend/src/components/ErrorBoundary.tsx
Normal file
48
frontend/src/components/ErrorBoundary.tsx
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import { Component, type ReactNode } from "react";
|
||||
import { notify } from "../lib/notifications";
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
}
|
||||
interface State {
|
||||
crashed: boolean;
|
||||
}
|
||||
|
||||
// Catches render-time crashes anywhere in the tree, logs a fatal notification (kept
|
||||
// in the center across the reload) and offers a recovery action.
|
||||
export default class ErrorBoundary extends Component<Props, State> {
|
||||
state: State = { crashed: false };
|
||||
|
||||
static getDerivedStateFromError(): State {
|
||||
return { crashed: true };
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error) {
|
||||
notify({
|
||||
level: "fatal",
|
||||
title: "Something broke",
|
||||
message: error.message || "Unexpected error",
|
||||
requiresInteraction: true,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.crashed) {
|
||||
return (
|
||||
<div className="min-h-screen grid place-items-center text-muted p-6 text-center">
|
||||
<div>
|
||||
<div className="text-lg font-semibold text-fg mb-1">Something went wrong.</div>
|
||||
<div className="text-sm mb-3">The app hit an unexpected error.</div>
|
||||
<button
|
||||
onClick={() => location.reload()}
|
||||
className="text-accent hover:underline text-sm font-semibold"
|
||||
>
|
||||
Reload
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { useInfiniteQuery, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { api, type FeedFilters, type Video } from "../lib/api";
|
||||
import { toast } from "../lib/toast";
|
||||
import { toast } from "../lib/notifications";
|
||||
import VideoCard from "./VideoCard";
|
||||
|
||||
const PAGE = 60;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {
|
|||
import { SCHEMES, type Scheme, type ThemePrefs } from "../lib/theme";
|
||||
import type { FeedFilters, Me } from "../lib/api";
|
||||
import SyncStatus from "./SyncStatus";
|
||||
import NotificationCenter from "./NotificationCenter";
|
||||
|
||||
function IconBtn(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
|
||||
const { className = "", ...rest } = props;
|
||||
|
|
@ -130,6 +131,8 @@ export default function Header({
|
|||
)}
|
||||
</div>
|
||||
|
||||
<NotificationCenter />
|
||||
|
||||
<div className="pl-1">
|
||||
<AccountMenu me={me} logout={logout} />
|
||||
</div>
|
||||
|
|
|
|||
119
frontend/src/components/NotificationCenter.tsx
Normal file
119
frontend/src/components/NotificationCenter.tsx
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { useSyncExternalStore } from "react";
|
||||
import { Bell, Trash2 } from "lucide-react";
|
||||
import {
|
||||
clearAll,
|
||||
dismiss,
|
||||
getNotifications,
|
||||
getUnreadCount,
|
||||
markAllRead,
|
||||
subscribe,
|
||||
} from "../lib/notifications";
|
||||
import { LEVEL_STYLE } from "./Toaster";
|
||||
|
||||
function relTime(ts: number): string {
|
||||
const s = Math.round((Date.now() - ts) / 1000);
|
||||
if (s < 60) return "just now";
|
||||
const m = Math.round(s / 60);
|
||||
if (m < 60) return `${m}m ago`;
|
||||
const h = Math.round(m / 60);
|
||||
if (h < 24) return `${h}h ago`;
|
||||
const d = Math.round(h / 24);
|
||||
return `${d}d ago`;
|
||||
}
|
||||
|
||||
export default function NotificationCenter() {
|
||||
const notifications = useSyncExternalStore(subscribe, getNotifications, getNotifications);
|
||||
const unread = useSyncExternalStore(subscribe, getUnreadCount, getUnreadCount);
|
||||
const [open, setOpen] = useState(false);
|
||||
const wrap = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Opening the center marks everything read.
|
||||
useEffect(() => {
|
||||
if (open) markAllRead();
|
||||
}, [open, notifications.length]);
|
||||
|
||||
return (
|
||||
<div className="relative" ref={wrap}>
|
||||
<button
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
title="Notifications"
|
||||
className="relative p-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"
|
||||
>
|
||||
<Bell className="w-5 h-5" />
|
||||
{unread > 0 && (
|
||||
<span className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full bg-accent text-accent-fg text-[10px] font-bold grid place-items-center">
|
||||
{unread > 9 ? "9+" : unread}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<>
|
||||
<div className="fixed inset-0 z-20" onClick={() => setOpen(false)} />
|
||||
<div className="absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl border border-border bg-surface shadow-2xl z-30 flex flex-col max-h-[70vh]">
|
||||
<div className="flex items-center justify-between px-3 py-2 border-b border-border">
|
||||
<div className="text-sm font-semibold">Notifications</div>
|
||||
{notifications.length > 0 && (
|
||||
<button
|
||||
onClick={clearAll}
|
||||
className="flex items-center gap-1 text-xs text-muted hover:text-accent transition"
|
||||
title="Clear all"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="overflow-y-auto">
|
||||
{notifications.length === 0 ? (
|
||||
<div className="px-3 py-8 text-center text-sm text-muted">
|
||||
No notifications yet.
|
||||
</div>
|
||||
) : (
|
||||
notifications.map((n) => {
|
||||
const { icon: Icon, color } = LEVEL_STYLE[n.level];
|
||||
const needsAction = n.requiresInteraction && !n.dismissed;
|
||||
return (
|
||||
<div
|
||||
key={n.id}
|
||||
className={`flex items-start gap-2.5 px-3 py-2.5 border-b border-border/60 ${
|
||||
needsAction ? "bg-accent/5" : ""
|
||||
}`}
|
||||
>
|
||||
<Icon className={`w-4 h-4 shrink-0 mt-0.5 ${color}`} />
|
||||
<div className="min-w-0 flex-1">
|
||||
{n.title && <div className="text-sm font-semibold">{n.title}</div>}
|
||||
<div className="text-sm break-words">{n.message}</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<span className="text-[11px] text-muted">{relTime(n.ts)}</span>
|
||||
{needsAction && (
|
||||
<span className="text-[10px] uppercase tracking-wide font-semibold text-accent">
|
||||
Action needed
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{n.action && !n.dismissed && (
|
||||
<button
|
||||
onClick={() => {
|
||||
n.action!.onClick();
|
||||
dismiss(n.id);
|
||||
}}
|
||||
className="mt-1 text-accent text-sm font-semibold hover:underline"
|
||||
>
|
||||
{n.action.label}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,29 +1,68 @@
|
|||
import { useSyncExternalStore } from "react";
|
||||
import { dismiss, getToasts, subscribe } from "../lib/toast";
|
||||
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 }
|
||||
> = {
|
||||
info: { icon: Info, color: "text-accent" },
|
||||
success: { icon: CheckCircle2, color: "text-emerald-400" },
|
||||
warning: { icon: AlertTriangle, color: "text-amber-400" },
|
||||
error: { icon: AlertCircle, color: "text-red-400" },
|
||||
fatal: { icon: XCircle, color: "text-red-500" },
|
||||
};
|
||||
|
||||
export default function Toaster() {
|
||||
const toasts = useSyncExternalStore(subscribe, getToasts, getToasts);
|
||||
const toasts = useSyncExternalStore(subscribe, getActiveToasts, getActiveToasts);
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
|
||||
{toasts.map((t) => (
|
||||
<div
|
||||
key={t.id}
|
||||
className="bg-surface border border-border rounded-xl shadow-2xl px-4 py-3 flex items-center gap-4 animate-[fadeIn_0.15s_ease]"
|
||||
>
|
||||
<span className="text-sm">{t.message}</span>
|
||||
{t.action && (
|
||||
<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 } = LEVEL_STYLE[t.level];
|
||||
return (
|
||||
<div
|
||||
key={t.id}
|
||||
className="bg-surface border border-border rounded-xl shadow-2xl px-3 py-3 flex items-start gap-3 animate-[fadeIn_0.15s_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={() => {
|
||||
t.action!.onClick();
|
||||
dismiss(t.id);
|
||||
}}
|
||||
className="text-accent text-sm font-semibold hover:underline"
|
||||
onClick={() => dismiss(t.id)}
|
||||
className="shrink-0 text-muted hover:text-fg"
|
||||
title="Dismiss"
|
||||
>
|
||||
{t.action.label}
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue