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>
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import { Outlet, useLocation, useNavigate } from "react-router-dom";
|
|
|
|
import { useMe } from "../hooks/auth";
|
|
import { useServerEvents } from "../hooks/useServerEvents";
|
|
import { BottomBar } from "./BottomBar";
|
|
import { NotificationBell } from "./NotificationBell";
|
|
import { NotificationToaster } from "./NotificationToaster";
|
|
|
|
const TITLES: Record<string, string> = {
|
|
"/": "Forbidden Stars",
|
|
"/group": "Группа",
|
|
"/group/settings": "Настройки группы",
|
|
"/account": "Аккаунт",
|
|
"/match/new": "Новая партия",
|
|
"/stats": "Общая статистика",
|
|
};
|
|
|
|
export function AppShell() {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { data: me } = useMe();
|
|
useServerEvents(!!me); // живые обновления (SSE) только при наличии сессии
|
|
const title =
|
|
TITLES[location.pathname] ??
|
|
(location.pathname.startsWith("/u/") ? "Профиль игрока" : "Forbidden Stars");
|
|
const isHome = location.pathname === "/";
|
|
|
|
return (
|
|
<div className="app-shell">
|
|
<header className="top-bar">
|
|
<div className="top-bar-left">
|
|
{isHome ? (
|
|
<span className="title">{title}</span>
|
|
) : (
|
|
<button className="btn btn-ghost" onClick={() => navigate(-1)}>
|
|
← Назад
|
|
</button>
|
|
)}
|
|
</div>
|
|
<span className="title small muted top-bar-center">{!isHome ? title : ""}</span>
|
|
<div className="top-bar-right">
|
|
<NotificationBell enabled={!!me} />
|
|
</div>
|
|
</header>
|
|
|
|
<NotificationToaster enabled={!!me} />
|
|
|
|
<main className="app-main">
|
|
<Outlet />
|
|
</main>
|
|
|
|
<BottomBar />
|
|
</div>
|
|
);
|
|
}
|