fix(ui): notification UX — outside-click close, toast countdown, hide entry actions
- NotificationCenter closes on outside click (document listener, not an overlay that the blurred header trapped) and no longer needs a second bell click. - Toasts show a level-colored countdown bar and auto-dismiss faster (6s default). - Hidden-video notifications carry structured meta so the center offers an in-app 'Find in feed' (jump to that channel's hidden videos) and a one-click 'Unhide', working even after a reload when the live Undo callback is gone.
This commit is contained in:
npeter83
parent
2c51e4434b
commit
a6e175445d
6 changed files with 173 additions and 71 deletions
|
|
@ -1,13 +1,16 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { useSyncExternalStore } from "react";
|
||||
import { Bell, Trash2 } from "lucide-react";
|
||||
import { useEffect, useRef, useState, useSyncExternalStore } from "react";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { Bell, Eye, Search, Trash2 } from "lucide-react";
|
||||
import { api, type FeedFilters } from "../lib/api";
|
||||
import {
|
||||
clearAll,
|
||||
dismiss,
|
||||
getNotifications,
|
||||
getUnreadCount,
|
||||
markAllRead,
|
||||
notify,
|
||||
subscribe,
|
||||
type NotifMeta,
|
||||
} from "../lib/notifications";
|
||||
import { LEVEL_STYLE } from "./Toaster";
|
||||
|
||||
|
|
@ -22,17 +25,55 @@ function relTime(ts: number): string {
|
|||
return `${d}d ago`;
|
||||
}
|
||||
|
||||
export default function NotificationCenter() {
|
||||
export default function NotificationCenter({
|
||||
filters,
|
||||
setFilters,
|
||||
}: {
|
||||
filters: FeedFilters;
|
||||
setFilters: (f: FeedFilters) => void;
|
||||
}) {
|
||||
const notifications = useSyncExternalStore(subscribe, getNotifications, getNotifications);
|
||||
const unread = useSyncExternalStore(subscribe, getUnreadCount, getUnreadCount);
|
||||
const [open, setOpen] = useState(false);
|
||||
const wrap = useRef<HTMLDivElement>(null);
|
||||
const qc = useQueryClient();
|
||||
|
||||
// Close when clicking anywhere outside the panel.
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
function onDown(e: MouseEvent) {
|
||||
if (wrap.current && !wrap.current.contains(e.target as Node)) setOpen(false);
|
||||
}
|
||||
document.addEventListener("mousedown", onDown);
|
||||
return () => document.removeEventListener("mousedown", onDown);
|
||||
}, [open]);
|
||||
|
||||
// Opening the center marks everything read.
|
||||
useEffect(() => {
|
||||
if (open) markAllRead();
|
||||
}, [open, notifications.length]);
|
||||
|
||||
function locateHidden(meta: NotifMeta) {
|
||||
setFilters({
|
||||
...filters,
|
||||
show: "hidden",
|
||||
channelId: meta.channelId || undefined,
|
||||
channelName: meta.channelName || undefined,
|
||||
});
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
function unhide(meta: NotifMeta) {
|
||||
api
|
||||
.setState(meta.videoId, "new")
|
||||
.then(() => {
|
||||
qc.invalidateQueries({ queryKey: ["feed"] });
|
||||
qc.invalidateQueries({ queryKey: ["feed-count"] });
|
||||
notify({ level: "success", message: `Unhidden “${meta.title}”` });
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative" ref={wrap}>
|
||||
<button
|
||||
|
|
@ -49,52 +90,69 @@ export default function NotificationCenter() {
|
|||
</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="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 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;
|
||||
const hidden = n.meta?.kind === "video-hidden" ? n.meta : null;
|
||||
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>
|
||||
|
||||
{hidden ? (
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<button
|
||||
onClick={() => locateHidden(hidden)}
|
||||
className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
|
||||
>
|
||||
<Search className="w-3.5 h-3.5" />
|
||||
Find in feed
|
||||
</button>
|
||||
<button
|
||||
onClick={() => unhide(hidden)}
|
||||
className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5" />
|
||||
Unhide
|
||||
</button>
|
||||
</div>
|
||||
{n.action && !n.dismissed && (
|
||||
) : (
|
||||
n.action &&
|
||||
!n.dismissed && (
|
||||
<button
|
||||
onClick={() => {
|
||||
n.action!.onClick();
|
||||
|
|
@ -104,15 +162,15 @@ export default function NotificationCenter() {
|
|||
>
|
||||
{n.action.label}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue