feat(notifications): durable per-user inbox (P1) + maintenance schema
Add a server-backed notification center that coexists with the client-side transient bell: a per-user `notifications` table (type/title/body/data JSON/ read/dismissed), a `/api/me/notifications` CRUD API (list, unread_count, read, read_all, dismiss, clear), and a left-nav inbox module with a live unread badge polled via useLiveQuery. Known types render trilingual text from type+data (English stored text is the fallback); read rows are trimmed past a soft cap. Also adds the schema the maintenance job builds on: videos.list?part=status columns (embeddable/privacy_status/upload_status) and the validation lifecycle columns (last_checked_at, unavailable_since, unavailable_reason). Page-id validation is centralized in one PAGES source of truth (isPage) so the new page survives reload without a second allowlist to keep in sync.
This commit is contained in:
npeter83
parent
a11a8db278
commit
b9a3a9012d
14 changed files with 649 additions and 22 deletions
176
frontend/src/components/NotificationsPanel.tsx
Normal file
176
frontend/src/components/NotificationsPanel.tsx
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
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 { useLiveQuery } from "../lib/useLiveQuery";
|
||||
|
||||
// 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.
|
||||
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));
|
||||
// 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 });
|
||||
}
|
||||
|
||||
export default function NotificationsPanel() {
|
||||
const { t } = useTranslation();
|
||||
const qc = useQueryClient();
|
||||
const q = useLiveQuery<{ items: AppNotification[]; total: number }>(
|
||||
["notifications"],
|
||||
() => api.notifications(),
|
||||
{ intervalMs: POLL_MS }
|
||||
);
|
||||
const items = q.data?.items ?? [];
|
||||
|
||||
// Any mutation refreshes both the list and the nav badge's unread count.
|
||||
const refresh = () => {
|
||||
qc.invalidateQueries({ queryKey: ["notifications"] });
|
||||
qc.invalidateQueries({ queryKey: ["notif-unread"] });
|
||||
};
|
||||
const readMut = useMutation({ mutationFn: api.markNotificationRead, onSuccess: refresh });
|
||||
const readAllMut = useMutation({ mutationFn: api.markAllNotificationsRead, onSuccess: refresh });
|
||||
const dismissMut = useMutation({ mutationFn: api.dismissNotification, onSuccess: refresh });
|
||||
const clearMut = useMutation({ mutationFn: api.clearNotifications, onSuccess: refresh });
|
||||
|
||||
const hasUnread = items.some((n) => !n.read);
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-3xl w-full mx-auto space-y-4">
|
||||
<div className="glass rounded-2xl p-4 flex items-center gap-3">
|
||||
<Bell className="w-5 h-5 text-accent shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-semibold">{t("inbox.title")}</div>
|
||||
<div className="text-xs text-muted">{t("inbox.subtitle")}</div>
|
||||
</div>
|
||||
{items.length > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => readAllMut.mutate()}
|
||||
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"
|
||||
>
|
||||
<CheckCheck className="w-4 h-4" />
|
||||
{t("inbox.markAllRead")}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => clearMut.mutate()}
|
||||
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"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
{t("inbox.clearAll")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{q.isLoading && !q.data ? (
|
||||
<div className="p-8 text-muted text-center">{t("common.loading")}</div>
|
||||
) : items.length === 0 ? (
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NotificationRow({
|
||||
n,
|
||||
t,
|
||||
onRead,
|
||||
onDismiss,
|
||||
}: {
|
||||
n: AppNotification;
|
||||
t: (k: string, o?: any) => string;
|
||||
onRead: () => void;
|
||||
onDismiss: () => void;
|
||||
}) {
|
||||
// The maintenance producer ships the affected videos in `data.videos`; list a few titles.
|
||||
const videos: { id: string; title: string | null }[] = Array.isArray(n.data?.videos)
|
||||
? n.data!.videos
|
||||
: [];
|
||||
// Known notification types are rendered from i18n (so they're trilingual) using the typed
|
||||
// payload; the server-stored title/body are an English fallback for any unknown type.
|
||||
const isMaintenance = n.type === "maintenance" && typeof n.data?.count === "number";
|
||||
const title = isMaintenance ? t("inbox.maintenance.title") : n.title;
|
||||
const body = isMaintenance
|
||||
? t("inbox.maintenance.body", { count: n.data!.count })
|
||||
: n.body;
|
||||
return (
|
||||
<div
|
||||
className={`glass rounded-xl p-3.5 flex items-start gap-3 transition ${
|
||||
n.read ? "opacity-70" : ""
|
||||
}`}
|
||||
>
|
||||
{!n.read && <span className="mt-1.5 w-2 h-2 rounded-full bg-accent shrink-0" aria-hidden />}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="font-medium text-sm">{title}</span>
|
||||
<span className="text-[11px] text-muted shrink-0">
|
||||
{relativeTime(n.created_at, t)}
|
||||
</span>
|
||||
</div>
|
||||
{body && <div className="text-sm text-muted mt-0.5">{body}</div>}
|
||||
{videos.length > 0 && (
|
||||
<ul className="mt-2 text-xs text-muted list-disc pl-4 space-y-0.5">
|
||||
{videos.slice(0, 8).map((v) => (
|
||||
<li key={v.id} className="truncate">
|
||||
{v.title || v.id}
|
||||
</li>
|
||||
))}
|
||||
{videos.length > 8 && (
|
||||
<li className="list-none text-muted/70">
|
||||
{t("inbox.andMore", { count: videos.length - 8 })}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{!n.read && (
|
||||
<button
|
||||
onClick={onRead}
|
||||
title={t("inbox.markRead")}
|
||||
aria-label={t("inbox.markRead")}
|
||||
className="p-1.5 rounded-lg text-muted hover:text-fg hover:bg-card transition"
|
||||
>
|
||||
<Check className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onDismiss}
|
||||
title={t("inbox.dismiss")}
|
||||
aria-label={t("inbox.dismiss")}
|
||||
className="p-1.5 rounded-lg text-muted hover:text-fg hover:bg-card transition"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue