ForbiddenStarsApp/frontend/src/components/AppShell.tsx

import { useState } from "react";
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";
import { SideMenu } from "./SideMenu";

const TITLES: Record<string, string> = {
  "/": "Forbidden Stars",
  "/group": "Группа",
  "/group/settings": "Настройки группы",
  "/account": "Аккаунт",
  "/match/new": "Новая партия",
  "/stats": "Общая статистика",
  "/help": "Справка",
};

export function AppShell() {
  const location = useLocation();
  const navigate = useNavigate();
  const { data: me } = useMe();
  const [menuOpen, setMenuOpen] = useState(false);
  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">
          <button className="top-bar-home" onClick={() => navigate("/")}>
            Forbidden Stars
          </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>

      <SideMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
      <BottomBar onMenu={() => setMenuOpen(true)} />
    </div>
  );
}