NotBigGhostandClaude Opus 4.8
f4286ffa6c
Новая система уведомлений поверх готовой SSE-шины: события пишутся в БД,
живут 72 часа и чистятся (при чтении списка + фоновой задачей), всплывают
сверху экрана в момент прихода, доступны через колокольчик в правом верхнем
углу (бейдж непрочитанных + панель).
Типы: приглашение в группу (→ /group), старт/финиш партии участникам кроме
инициатора (→ /match/{id}). Титулы — готовый хелпер-задел (не подключён, т.к.
выдача титулов игрокам ещё не реализована).
Бэкенд: модель Notification + миграция 0008 (идемпотентная), notification_service,
notify.notifications_changed, роутер /api/notifications (GET + /read), триггеры
в groups/matches, фоновая чистка в lifespan, защита hub.publish от закрытого loop.
Фронт: useNotifications/useMarkNotificationsRead, NotificationBell/Panel/Toaster,
перекомпоновка top-bar, стили; useServerEvents знает тип notifications.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
import { Bell } from "lucide-react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
import { useMarkNotificationsRead, useNotifications } from "../hooks/notifications";
|
|
import { NotificationPanel } from "./NotificationPanel";
|
|
|
|
/** Колокольчик в правом верхнем углу: бейдж непрочитанных + выпадающая панель. */
|
|
export function NotificationBell({ enabled }: { enabled: boolean }) {
|
|
const { data } = useNotifications(enabled);
|
|
const markRead = useMarkNotificationsRead();
|
|
const [open, setOpen] = useState(false);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const unread = data?.unread_count ?? 0;
|
|
|
|
// Закрытие панели по клику вне неё.
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const onDoc = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
|
};
|
|
document.addEventListener("mousedown", onDoc);
|
|
return () => document.removeEventListener("mousedown", onDoc);
|
|
}, [open]);
|
|
|
|
if (!enabled) return null;
|
|
|
|
const toggle = () => {
|
|
const next = !open;
|
|
setOpen(next);
|
|
if (next && unread > 0) markRead.mutate(undefined); // открыли — гасим бейдж
|
|
};
|
|
|
|
return (
|
|
<div className="notif-bell-wrap" ref={ref}>
|
|
<button className="notif-bell" aria-label="Уведомления" onClick={toggle}>
|
|
<Bell size={20} />
|
|
{unread > 0 && <span className="notif-badge">{unread > 99 ? "99+" : unread}</span>}
|
|
</button>
|
|
{open && <NotificationPanel items={data?.items ?? []} onClose={() => setOpen(false)} />}
|
|
</div>
|
|
);
|
|
}
|