Уведомления: 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/NotificationBell.tsx

@@ -0,0 +1,42 @@
+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>
+  );
+}