Уведомления: persistent + live (push-to-invalidate → pull)

Новая система уведомлений поверх готовой 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>

frontend/src/components/NotificationToaster.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useNotifications, type Notification } from "../hooks/notifications";
+
+const TOAST_TTL_MS = 5000;
+const MAX_VISIBLE = 4;
+
+/** Всплывашки сверху экрана в момент прихода новых уведомлений (push-to-invalidate → pull).
+ * Первый снимок списка не всплывает (чтобы не спамить при загрузке) — только новые id. */
+export function NotificationToaster({ enabled }: { enabled: boolean }) {
+  const { data } = useNotifications(enabled);
+  const navigate = useNavigate();
+  const seen = useRef<Set<number> | null>(null);
+  const [toasts, setToasts] = useState<Notification[]>([]);
+
+  useEffect(() => {
+    if (!data) return;
+    const items = data.items;
+    if (seen.current === null) {
+      seen.current = new Set(items.map((n) => n.id)); // первая загрузка — запомнить, не всплывать
+      return;
+    }
+    const fresh = items.filter((n) => !seen.current!.has(n.id));
+    if (fresh.length === 0) return;
+    fresh.forEach((n) => seen.current!.add(n.id));
+    setToasts((prev) => [...fresh, ...prev].slice(0, MAX_VISIBLE));
+    fresh.forEach((n) => {
+      setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== n.id)), TOAST_TTL_MS);
+    });
+  }, [data]);
+
+  if (!enabled || toasts.length === 0) return null;
+
+  const click = (n: Notification) => {
+    setToasts((prev) => prev.filter((t) => t.id !== n.id));
+    if (n.link) navigate(n.link);
+  };
+
+  return (
+    <div className="toast-top-wrap">
+      {toasts.map((n) => (
+        <button key={n.id} className="toast-top" onClick={() => click(n)}>
+          <div className="toast-top-title">{n.title}</div>
+          {n.body && <div className="toast-top-body">{n.body}</div>}
+        </button>
+      ))}
+    </div>
+  );
+}