feat(notifications): unify the two rail indicators into one inbox
Fold the client-side transient bell into the inbox page so there's a single notification indicator. The inbox now has two groups — "System" (durable, server-backed) and "Activity" (client-side events with their Unhide/Unwatch/ Find-in-feed actions) — and the nav badge sums both unread counts. The separate rail bell (NotificationCenter) is removed. Activity items get a per-item clear (X) alongside the global Clear all. Unhiding or unwatching a video from anywhere — a card, the toast's Undo, or the inbox — now quietly resolves the original "Hidden/Watched X" entry (no duplicate "Unhidden X" toast, no stale entry with a dead action), via a new resolveVideo store helper.
This commit is contained in:
npeter83
parent
dd83718304
commit
d3c6ce659c
8 changed files with 246 additions and 41 deletions
|
|
@ -1,29 +1,56 @@
|
|||
import { useEffect, useSyncExternalStore } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Bell, Check, CheckCheck, Trash2, X } from "lucide-react";
|
||||
import { api, type AppNotification } from "../lib/api";
|
||||
import { Bell, Check, CheckCheck, Eye, RotateCcw, Search, Trash2, X } from "lucide-react";
|
||||
import { api, type AppNotification, type FeedFilters } from "../lib/api";
|
||||
import { useLiveQuery } from "../lib/useLiveQuery";
|
||||
import {
|
||||
clearAll as clearClient,
|
||||
dismiss as dismissClient,
|
||||
getNotifications,
|
||||
getUnreadCount,
|
||||
markAllRead as markAllClientRead,
|
||||
remove as removeClient,
|
||||
resolveVideo,
|
||||
subscribe,
|
||||
type Notification as ClientNotif,
|
||||
type VideoHiddenMeta,
|
||||
type VideoWatchedMeta,
|
||||
} from "../lib/notifications";
|
||||
import type { Page } from "../lib/urlState";
|
||||
import { LEVEL_STYLE } from "./Toaster";
|
||||
|
||||
// The durable, server-backed notification center (inbox phase 1). It COEXISTS with the
|
||||
// client-side transient bell in the nav rail: the bell is a quick peek at recent toasts kept
|
||||
// in localStorage, this is the full, filterable, clearable history synced from the server.
|
||||
// The single notification center. "System" = durable, server-backed notifications (inbox
|
||||
// phase 1). "Activity" = the client-side transient events (action confirmations, errors, with
|
||||
// their inline undo/find actions) that used to live behind a separate bell — folded in here so
|
||||
// there's one indicator and one place to look. Transient toasts still pop via the Toaster.
|
||||
const POLL_MS = 8000;
|
||||
|
||||
function relativeTime(iso: string | null, t: (k: string, o?: any) => string): string {
|
||||
if (!iso) return "";
|
||||
const then = new Date(iso).getTime();
|
||||
const secs = Math.max(0, Math.round((Date.now() - then) / 1000));
|
||||
return relativeFromMs(new Date(iso).getTime(), t);
|
||||
}
|
||||
|
||||
function relativeFromMs(ms: number, t: (k: string, o?: any) => string): string {
|
||||
const secs = Math.max(0, Math.round((Date.now() - ms) / 1000));
|
||||
// Reuse the bell's relative-time strings (notifications.time.*) — same format, no dupes.
|
||||
if (secs < 60) return t("notifications.time.justNow");
|
||||
const mins = Math.round(secs / 60);
|
||||
if (mins < 60) return t("notifications.time.minutes", { count: mins });
|
||||
const hours = Math.round(mins / 60);
|
||||
if (hours < 24) return t("notifications.time.hours", { count: hours });
|
||||
const days = Math.round(hours / 24);
|
||||
return t("notifications.time.days", { count: days });
|
||||
return t("notifications.time.days", { count: Math.round(hours / 24) });
|
||||
}
|
||||
|
||||
export default function NotificationsPanel() {
|
||||
export default function NotificationsPanel({
|
||||
filters,
|
||||
setFilters,
|
||||
setPage,
|
||||
}: {
|
||||
filters: FeedFilters;
|
||||
setFilters: (f: FeedFilters) => void;
|
||||
setPage: (p: Page) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const qc = useQueryClient();
|
||||
const q = useLiveQuery<{ items: AppNotification[]; total: number }>(
|
||||
|
|
@ -31,9 +58,16 @@ export default function NotificationsPanel() {
|
|||
() => api.notifications(),
|
||||
{ intervalMs: POLL_MS }
|
||||
);
|
||||
const items = q.data?.items ?? [];
|
||||
const serverItems = q.data?.items ?? [];
|
||||
const clientItems = useSyncExternalStore(subscribe, getNotifications, getNotifications);
|
||||
const clientUnread = useSyncExternalStore(subscribe, getUnreadCount, getUnreadCount);
|
||||
|
||||
// Opening the center marks the (ephemeral) client items read, matching the old bell. Server
|
||||
// items stay unread until acted on individually.
|
||||
useEffect(() => {
|
||||
markAllClientRead();
|
||||
}, []);
|
||||
|
||||
// Any mutation refreshes both the list and the nav badge's unread count.
|
||||
const refresh = () => {
|
||||
qc.invalidateQueries({ queryKey: ["notifications"] });
|
||||
qc.invalidateQueries({ queryKey: ["notif-unread"] });
|
||||
|
|
@ -43,7 +77,41 @@ export default function NotificationsPanel() {
|
|||
const dismissMut = useMutation({ mutationFn: api.dismissNotification, onSuccess: refresh });
|
||||
const clearMut = useMutation({ mutationFn: api.clearNotifications, onSuccess: refresh });
|
||||
|
||||
const hasUnread = items.some((n) => !n.read);
|
||||
const serverUnread = serverItems.some((n) => !n.read);
|
||||
const hasAny = serverItems.length > 0 || clientItems.length > 0;
|
||||
const hasUnread = serverUnread || clientUnread > 0;
|
||||
|
||||
function markAll() {
|
||||
markAllClientRead();
|
||||
if (serverUnread) readAllMut.mutate();
|
||||
else refresh();
|
||||
}
|
||||
function clearEverything() {
|
||||
clearClient();
|
||||
clearMut.mutate();
|
||||
}
|
||||
|
||||
// "Find in feed" / undo, ported from the old bell.
|
||||
function locateHidden(meta: VideoHiddenMeta) {
|
||||
setFilters({
|
||||
...filters,
|
||||
show: "hidden",
|
||||
channelId: meta.channelId || undefined,
|
||||
channelName: meta.channelName || undefined,
|
||||
});
|
||||
setPage("feed");
|
||||
}
|
||||
function revertState(meta: VideoHiddenMeta | VideoWatchedMeta) {
|
||||
api
|
||||
.setState(meta.videoId, "new")
|
||||
.then(() => {
|
||||
qc.invalidateQueries({ queryKey: ["feed"] });
|
||||
qc.invalidateQueries({ queryKey: ["feed-count"] });
|
||||
// Quietly resolve the now-stale notice (no confirmation toast — the change is visible).
|
||||
resolveVideo(meta.videoId);
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-3xl w-full mx-auto space-y-4">
|
||||
|
|
@ -53,10 +121,10 @@ export default function NotificationsPanel() {
|
|||
<div className="font-semibold">{t("inbox.title")}</div>
|
||||
<div className="text-xs text-muted">{t("inbox.subtitle")}</div>
|
||||
</div>
|
||||
{items.length > 0 && (
|
||||
{hasAny && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => readAllMut.mutate()}
|
||||
onClick={markAll}
|
||||
disabled={!hasUnread || readAllMut.isPending}
|
||||
className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg text-muted hover:text-fg hover:bg-card transition disabled:opacity-40"
|
||||
>
|
||||
|
|
@ -64,7 +132,7 @@ export default function NotificationsPanel() {
|
|||
{t("inbox.markAllRead")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => clearMut.mutate()}
|
||||
onClick={clearEverything}
|
||||
disabled={clearMut.isPending}
|
||||
className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg text-muted hover:text-fg hover:bg-card transition disabled:opacity-40"
|
||||
>
|
||||
|
|
@ -75,24 +143,52 @@ export default function NotificationsPanel() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{q.isLoading && !q.data ? (
|
||||
{q.isLoading && !q.data && clientItems.length === 0 ? (
|
||||
<div className="p-8 text-muted text-center">{t("common.loading")}</div>
|
||||
) : items.length === 0 ? (
|
||||
) : !hasAny ? (
|
||||
<div className="glass rounded-2xl p-10 text-center text-muted">
|
||||
<Bell className="w-8 h-8 mx-auto mb-3 opacity-40" />
|
||||
{t("inbox.empty")}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{items.map((n) => (
|
||||
<NotificationRow
|
||||
key={n.id}
|
||||
n={n}
|
||||
t={t}
|
||||
onRead={() => readMut.mutate(n.id)}
|
||||
onDismiss={() => dismissMut.mutate(n.id)}
|
||||
/>
|
||||
))}
|
||||
<div className="space-y-4">
|
||||
{serverItems.length > 0 && (
|
||||
<section>
|
||||
<div className="text-xs uppercase tracking-wide text-muted mb-2">
|
||||
{t("inbox.sectionSystem")}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{serverItems.map((n) => (
|
||||
<NotificationRow
|
||||
key={n.id}
|
||||
n={n}
|
||||
t={t}
|
||||
onRead={() => readMut.mutate(n.id)}
|
||||
onDismiss={() => dismissMut.mutate(n.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
{clientItems.length > 0 && (
|
||||
<section>
|
||||
<div className="text-xs uppercase tracking-wide text-muted mb-2">
|
||||
{t("inbox.sectionActivity")}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{clientItems.map((n) => (
|
||||
<ClientActivityRow
|
||||
key={n.id}
|
||||
n={n}
|
||||
t={t}
|
||||
onFind={locateHidden}
|
||||
onRevert={revertState}
|
||||
onRemove={() => removeClient(n.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -185,3 +281,91 @@ function NotificationRow({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ClientActivityRow({
|
||||
n,
|
||||
t,
|
||||
onFind,
|
||||
onRevert,
|
||||
onRemove,
|
||||
}: {
|
||||
n: ClientNotif;
|
||||
t: (k: string, o?: any) => string;
|
||||
onFind: (meta: VideoHiddenMeta) => void;
|
||||
onRevert: (meta: VideoHiddenMeta | VideoWatchedMeta) => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const { icon: Icon, color } = LEVEL_STYLE[n.level];
|
||||
const needsAction = n.requiresInteraction && !n.dismissed;
|
||||
const hidden = n.meta?.kind === "video-hidden" ? n.meta : null;
|
||||
const watched = n.meta?.kind === "video-watched" ? n.meta : null;
|
||||
return (
|
||||
<div
|
||||
className={`glass rounded-xl p-3.5 flex items-start gap-3 ${needsAction ? "ring-1 ring-accent/30" : ""}`}
|
||||
>
|
||||
<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">{relativeFromMs(n.ts, t)}</span>
|
||||
{needsAction && (
|
||||
<span className="text-[10px] uppercase tracking-wide font-semibold text-accent">
|
||||
{t("notifications.actionNeeded")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{hidden ? (
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<button
|
||||
onClick={() => onFind(hidden)}
|
||||
className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
|
||||
>
|
||||
<Search className="w-3.5 h-3.5" />
|
||||
{t("notifications.findInFeed")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onRevert(hidden)}
|
||||
className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5" />
|
||||
{t("notifications.unhide")}
|
||||
</button>
|
||||
</div>
|
||||
) : watched ? (
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<button
|
||||
onClick={() => onRevert(watched)}
|
||||
className="flex items-center gap-1 text-accent text-sm font-semibold hover:underline"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" />
|
||||
{t("notifications.unwatch")}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
n.action &&
|
||||
!n.dismissed && (
|
||||
<button
|
||||
onClick={() => {
|
||||
n.action!.onClick();
|
||||
dismissClient(n.id);
|
||||
}}
|
||||
className="mt-1 text-accent text-sm font-semibold hover:underline"
|
||||
>
|
||||
{n.action.label}
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={onRemove}
|
||||
title={t("inbox.dismiss")}
|
||||
aria-label={t("inbox.dismiss")}
|
||||
className="p-1.5 rounded-lg text-muted hover:text-fg hover:bg-card transition shrink-0"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue