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
|
|
@ -5,6 +5,7 @@ import { useQuery } from "@tanstack/react-query";
|
|||
import {
|
||||
Activity,
|
||||
BarChart3,
|
||||
Bell,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Home,
|
||||
|
|
@ -17,6 +18,7 @@ import {
|
|||
UserPlus,
|
||||
} from "lucide-react";
|
||||
import { api, type FeedFilters, type Me } from "../lib/api";
|
||||
import { useLiveQuery } from "../lib/useLiveQuery";
|
||||
import type { Page } from "../lib/urlState";
|
||||
import { type LangCode } from "../i18n";
|
||||
import AvatarImg from "./Avatar";
|
||||
|
|
@ -116,12 +118,22 @@ export default function NavSidebar({
|
|||
}
|
||||
}
|
||||
|
||||
type NavItem = { page: Page; icon: typeof Home; label: string };
|
||||
// Durable, server-backed unread count for the inbox badge. Polled live (pauses when the
|
||||
// tab is hidden); coexists with the client-side transient bell at the bottom of the rail.
|
||||
const unreadQuery = useLiveQuery(
|
||||
["notif-unread"],
|
||||
api.notificationUnreadCount,
|
||||
{ intervalMs: 30000 }
|
||||
);
|
||||
const unread = unreadQuery.data?.count ?? 0;
|
||||
|
||||
type NavItem = { page: Page; icon: typeof Home; label: string; badge?: number };
|
||||
// User-facing content modules vs. admin/system modules, separated by a divider in the rail.
|
||||
const userItems: NavItem[] = [
|
||||
{ page: "feed", icon: Home, label: t("header.account.feed") },
|
||||
{ page: "channels", icon: Tv, label: t("header.account.channels") },
|
||||
{ page: "playlists", icon: ListVideo, label: t("header.account.playlists") },
|
||||
{ page: "notifications", icon: Bell, label: t("inbox.navLabel"), badge: unread },
|
||||
];
|
||||
const systemItems: NavItem[] =
|
||||
me.role === "admin"
|
||||
|
|
@ -135,18 +147,29 @@ export default function NavSidebar({
|
|||
"w-full flex items-center gap-3 rounded-lg px-2.5 py-2 text-sm transition";
|
||||
const name = me.display_name ?? me.email.split("@")[0];
|
||||
|
||||
const renderItem = ({ page: p, icon: Icon, label }: NavItem) => (
|
||||
const renderItem = ({ page: p, icon: Icon, label, badge }: NavItem) => (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => setPage(p)}
|
||||
title={collapsed ? label : undefined}
|
||||
aria-current={page === p ? "page" : undefined}
|
||||
className={`${rowBase} ${collapsed ? "justify-center px-0" : ""} ${
|
||||
className={`${rowBase} ${collapsed ? "justify-center px-0" : ""} relative ${
|
||||
page === p ? "bg-accent text-accent-fg" : "text-muted hover:text-fg hover:bg-card"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-[18px] h-[18px] shrink-0" />
|
||||
<span className="relative shrink-0">
|
||||
<Icon className="w-[18px] h-[18px]" />
|
||||
{/* Collapsed rail: a small dot on the icon; expanded: a numeric pill at the row end. */}
|
||||
{!!badge && badge > 0 && collapsed && (
|
||||
<span className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-accent ring-2 ring-bg" />
|
||||
)}
|
||||
</span>
|
||||
{!collapsed && <span className="truncate">{label}</span>}
|
||||
{!!badge && badge > 0 && !collapsed && (
|
||||
<span className="ml-auto min-w-[18px] h-[18px] px-1 rounded-full bg-accent text-accent-fg text-[11px] font-semibold inline-flex items-center justify-center tabular-nums">
|
||||
{badge > 99 ? "99+" : badge}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
|
|
|
|||
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