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

@@ -0,0 +1,43 @@
+import { useNavigate } from "react-router-dom";
+
+import { formatTime } from "../domain/format";
+import type { Notification } from "../hooks/notifications";
+
+/** Выпадающий список уведомлений под колокольчиком. Клик по строке ведёт по ссылке. */
+export function NotificationPanel({
+  items,
+  onClose,
+}: {
+  items: Notification[];
+  onClose: () => void;
+}) {
+  const navigate = useNavigate();
+
+  const go = (n: Notification) => {
+    onClose();
+    if (n.link) navigate(n.link);
+  };
+
+  return (
+    <div className="notif-panel">
+      <div className="notif-panel-head">Уведомления</div>
+      {items.length === 0 ? (
+        <div className="notif-empty muted small">Уведомлений нет</div>
+      ) : (
+        <div className="notif-list">
+          {items.map((n) => (
+            <button
+              key={n.id}
+              className={`notif-item${n.read_at ? "" : " unread"}`}
+              onClick={() => go(n)}
+            >
+              <div className="notif-item-title">{n.title}</div>
+              {n.body && <div className="notif-item-body muted small">{n.body}</div>}
+              <div className="notif-item-time muted small">{formatTime(n.created_at)}</div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}