51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { Bot, PanelRightClose, PanelRightOpen } from "lucide-react";
|
|
|
|
import { getServerHealth } from "../api/client";
|
|
import { Button } from "../components/common/Button";
|
|
import { useLayoutStore } from "../stores/layoutStore";
|
|
|
|
const pageTitles = {
|
|
agent: "Agent",
|
|
projects: "Projects",
|
|
settings: "Settings",
|
|
};
|
|
|
|
export function TopBar() {
|
|
const activeNav = useLayoutStore((state) => state.activeNav);
|
|
const isAgentSidebarOpen = useLayoutStore((state) => state.isAgentSidebarOpen);
|
|
const toggleAgentSidebar = useLayoutStore((state) => state.toggleAgentSidebar);
|
|
const healthQuery = useQuery({
|
|
queryKey: ["server-health"],
|
|
queryFn: getServerHealth,
|
|
staleTime: 10_000,
|
|
});
|
|
|
|
const health = healthQuery.data ?? { ok: false, label: "checking" };
|
|
|
|
return (
|
|
<header className="top-bar">
|
|
<div>
|
|
<p>NomadCode Web</p>
|
|
<h1>{pageTitles[activeNav]}</h1>
|
|
</div>
|
|
<div className="top-bar__actions">
|
|
<span className={health.ok ? "connection-badge is-online" : "connection-badge"}>
|
|
<span aria-hidden="true" />
|
|
Core {health.label}
|
|
</span>
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
size="sm"
|
|
icon={isAgentSidebarOpen ? <PanelRightClose size={16} aria-hidden="true" /> : <PanelRightOpen size={16} aria-hidden="true" />}
|
|
onClick={toggleAgentSidebar}
|
|
>
|
|
<span className="hide-on-small">{isAgentSidebarOpen ? "Hide Agent" : "Show Agent"}</span>
|
|
<span className="show-on-small">Agent</span>
|
|
</Button>
|
|
<Button type="button" variant="ghost" size="icon" aria-label="Agent quick status" icon={<Bot size={18} aria-hidden="true" />} />
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|